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.

Recommended Answers

All 4 Replies

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.

<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.

Have you worked out a solution?

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.