Question

I want a 100% height div with absolutely positioned divs inside it. For whatever reason when I add the child divs, the height of the parent div shrinks to the static content size.

To clarify, I do not want the absolutely positioned elements to be full-height. Just the containing div.

I have (simplified) markup as follows:

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>

And the styling:

#content {
  min-height: 100%;
}
#dashboard {
  min-height: 100%;
  height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}

I have put #content and #dashboard as min-height 100% and height 100% and that works. If I comment out the absolutely positioned divs, both are the full height of the screen.

But when I add the .widgets, #content is still full height (good) but #dashboard becomes only the height of ‘some text’. For whatever reason, adding absolutely positioned content to #dashboard changes its height.

Note (edit)

I don’t want #content to be 100% height because it needs to grow
with content on other pages. I only want #dashboard to be exactly 100%
height.

jQuery works, but I’d like to do it with css only

$("#dashboard").height( $("#content").height() );

Also I tried changing the type of display to block or inline for #content and setting -moz-box-sizing to default because I read it can break min-height for Firefox.

Any idea how to fix this?

---

Similar but not the same: How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?

Answer 1

From the MDN:

A percentage value for min-height property is calculated with
respect to the height of the generated box’s containing block.
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.

Hence, you’ll need to specify the height of the #content element explicitly to get min-height property of #dashboard element to work.

Thus, try using height property for #content instead of min-height:

#content {
  height: 100%;
}

Here is a jsDiddle Demo.

html, body {
    height: 100%;
}
#content {
  height: 100%;
}
#dashboard {
  min-height: 100%;
  position: relative;
}
.widget {
  height: 50px; /* arbitrary */
  width: 50px;
  position: absolute;
}​

<div id="content">
   <div id="dashboard">
      Some text
      <div class="widget"></div>
      <div class="widget"></div>
      ...
   </div>
</div>​

UPDATE

I don’t want #content to be full-size at all times.

Then, you’ll need to use a fixed height for the #content:

#content {
  height: 200px;  /* or whatever you want */
}

#dashboard {
  height: 100%;   /* or inherit */;
}

Else, you should use JavaScript to calculate the needed height and apply that to the #dashboard element.