Parent Div with Height: 100% Doesn't Work

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

---

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Child's `height: 100%;` is not taking parent's full height, why?

Looks like I misunderstood the term containing block, I thought it would be the parent, but not really, there's much more into this.

I had to dig into the W3C standard to find out:

Definition of "containing block"

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.

The containing block in which the root element lives is a rectangle called the initial containing block.

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

...

CSS - height 100% of parent not working

the #game-content or its parent(body) must have a fixed height, if try setting a fixed height in #game-content the #game-wrapper will have its 100% height.

Try out:

#game-content
{
    margin-top:50px;
    overflow:auto;
    height:1000px;
    width:100%;
}

#game-wrapper
{
    float:left;
    margin-left:90px;
    position:relative;
    height:100%;
}

or

body, html { /* both to be sized */
   height: 1000px; /* or 100% */
}

nested div does not fill parent div with min-height 100%

The solution for me was to use multiple backgrounds rather than the extra div overlay. I did it in the CSS2 pseudo elements fashion (::before with an background pattern) described here:

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

HTML div elements not taking the height of their parent, even though the parent has nonzero height

It's a common misconception about height: 100%.

From MDN:

The percentage 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 value
computes to auto. A percentage height on the root element is relative
to the initial containing block.

One solution to your problem could be absolute positioning. Set position: relative on your container and position the children absolutely. Setting top: 0; bottom: 0; on them will stretch them to the container's height.

Quick Demo (shows the concept, you might need to tweak it)

Parent div with height: 100% doesn't work

This can work

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>

Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?

In the first case, you don't have any height defined so it's clear that the precentage height on child will fail.

From the specification:

Specifies a percentage height. The percentage 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 value computes to 'auto'.

min-height is only a boundary and the height of your element still depend on its content. If you will have one that exceed 300px the element will have more than 300px

.container {
  background-color: red;
  width: 500px;
  min-height: 300px;
  padding:10px;
}

.child {
  background-color: blue;
  width: 500px;
  height: 400px;
  animation:change 2s linear infinite alternate;
}
@keyframes change{
   from {
     height:100px;
   }
}

<div class="container">
  <div class="child">
    
  </div>
</div>

---

Related Topics