0

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: n/a

2
Contributors
4
Replies
5
Views
7 Years
Discussion Span
Last Post by pritaeas
0

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.

0
<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: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.