parent div with absolutely positioned child divs refuses to be 100% height

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.

Answer 2

Absolutely-positioned elements are no longer part of the layout. The parent element has no idea how big child items are.

You need to set the height of the parent manually, or use JS to calculate the size of the child elements and apply accordingly.

Also, 100% height elements need their parent elements to be 100% height as well:

body, html { height:100% }

Answer 3

When you want to have a min-height of 100% (min 100%, expand when there is more content) for #content, use min-height together with height: auto:

body, html {
  height: 100%;
}
#content {
  min-height: 100%;
  height: auto;
}

Furthermore, if i understand your question correctly, you could simply use position: absolute together with top: 0; right: 0; bottom: 0; left: 0; to have exactly a height of 100% for #dashboard. Add position: relative to #content if the height of #dashboard should be relative to #content.

Answer 4

Absolute elements are taken out of the flow. If they are out of the flow, they do not add height to their parent.