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
  • 104 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

wanted .box2 to take the remaining vertical space inside a fixed-height container. The common height:100% attempt that tried does not do that: percentage heights are resolved against the containing block’s height, not against “leftover” space after siblings. A child set to height:100% will match the wrapper height and can overlap or overflow the other child (see MDN: the height property).

The simplest, most robust CSS-only solution is Flexbox: make the wrapper a column flex container, keep the first child fixed, and let the second child flex to fill the rest. This requires the wrapper to have an explicit height. Example CSS:

.wrapper {
  height: 100px;
  display: flex;
  flex-direction: column;
}
.box1 {
  height: 20px;
  flex: 0 0 20px;
}
.box2 {
  flex: 1 1 auto;
  overflow: auto;
}

If Flexbox cannot be used (very old browsers), alternatives are: position the wrapper relative and make the filler absolute with top equal to the fixed sibling height and bottom:0; or use calc() to set height: calc(100% - 20px) on the filler (both still require an explicit parent height). The table/table-cell trick also works but is less semantic.

Quick troubleshooting: confirm the wrapper has a computed height; remember borders/padding affect total height unless box-sizing: border-box is set; avoid collapsing margins on the first child; add overflow on the flexible child if its content may exceed the available space. Flexbox support is broad today (see Can I Use: flexbox).

Recommended Answers

All 4 Replies

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.