Member Avatar for Dat0

I have a div bloc with a height of 100px that wraps two div blocs. One of these wrapped divs has a height of 10px, while the other has no specified height.

My intention is for "box2" (no height specified) to automatically adjust its height to fill up the remaining space in its containing bloc .

.wrapper{height:100px;}
.box1{height:20px;}
.box2{} 

<div class="wrapper">
<div class ="box1"> I have fixed height</div>
<div class ="box2"> I don't have a height</div>
</div>

In equation form:
(height of wrapper) 100px = (h of div1) 20px + (h of div2) Y
where Y is what is needed for both div boxes to fill wrapper.

Edited by Dat0 because: n/a
  • 2 Contributors
  • 4 Replies
  • 91 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for Dat0

Note that this effect is doable using table. Where the table automatically calculates the height attribute of no-height-set <td> element so that the table height is honored.

Member Avatar for pritaeas 
<html>
 <head>
  <style>
   .wrapper {
    height:200px;
    position: relative;
    border: 1px solid #f00;
    padding: 1px;
   }
   .box1 {
    height:20px;
    border: 1px solid #0f0;
   }
   .box2 {
    height: 100%;
    border: 1px solid #00f;
   } 
  </style>
 </head>
 <body>
  <div class="wrapper">
   <div class="box1">I have fixed height</div>
   <div class="box2">I don't have a height</div>
  </div>
 </body>
</html>

I added the padding and borders so i could visually verify the result. But it is not correct yet. I noticed only after measuring. I know you can change it using javascript, but CSS should work too. I'll have another look.

Edited by pritaeas because: n/a
Member Avatar for Dat0

Have you worked out a solution?

Member Avatar for pritaeas

No, not yet, sorry. I must be overlooking something.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.