Css Height 100% Is Not Always Equal to the Direct Parent

css height 100% is not always equal to the direct parent

You don't specify a height for your <body>, as such the rest of the height is stuck trying to figure out what it's 100% of.

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.

...

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.

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>

Height 100% when parent height is auto

Maybe you should try to use "row row-eq-height" classes.

Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>

And add this CSS property to your custom CSS

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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%;
}

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

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }html, body, #fullheight {    min-height: 100% !important;    height: 100%;}#fullheight {    width: 250px;    background: blue;}

<div id=fullheight>  Lorem Ipsum        </div>

Why my children div can't take all the height of the parent div?

Ok guys finally I founded ! I needed to modify a bit the CSS like this (main point is adding position:fixed)

.nav-md .container.body .col-md-3.left_col {
    width: 230px;
    position: fixed;
    bottom:0;
    background-image: url(/navBar.jpg);
    color: #001155;
    height: 100% !important;

}

.nav-sm .container.body .col-md-3.left_col {
    width: 70px;
    padding: 0;
    z-index: 9;
    position: fixed;
    bottom:0;
    background-image: url(/navBar.jpg);
    color: #001155;
    height: 100% !important;
}

Css Height 100% Is Not Always Equal to the Direct Parent