CSS Can't Seem to Set Height to 100% of Parent Container

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 with max-height: 100% overflows parent

When you specify a percentage for max-height on a child, it is a percentage of the parent's actual height, not the parent's max-height, oddly enough. The same applies to max-width.

So, when you don't specify an explicit height on the parent, then there's no base height for the child's max-height to be calculated from, so max-height computes to none, allowing the child to be as tall as possible. The only other constraint acting on the child now is the max-width of its parent, and since the image itself is taller than it is wide, it overflows the container's height downwards, in order to maintain its aspect ratio while still being as large as possible overall.

When you do specify an explicit height for the parent, then the child knows it has to be at most 100% of that explicit height. That allows it to be constrained to the parent's height (while still maintaining its aspect ratio).

Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

See this example, to make it clearer:

html, body, .outer, .inner, .content {  height: 100%;  padding: 10px;  margin: 0;  background-color: rgba(255,0,0,.1);  box-sizing: border-box;}

<div class="outer">  <div class="inner">    <div class="content">      Content    </div>  </div></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;
}

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>

Child inside parent with min-height: 100% not inheriting height

This is a reported webkit (chrome/safari) bug, children of parents with min-height can't inherit the height property: https://bugs.webkit.org/show_bug.cgi?id=26559

Apparently Firefox is affected too (can't test in IE at the moment)

Possible workaround:

add position:relative to #containment
add position:absolute to #containment-shadow-left

The bug doesn't show when the inner element has absolute positioning.

See http://jsfiddle.net/xrebB/

Edit on April 10, 2014

Since I'm currently working on a project for which I really need parent containers with min-height, and child elements inheriting the height of the container, I did some more research.

First: I'm not so sure anymore whether the current browser behaviour really is a bug. CSS2.1 specs say:

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'.

If I put a min-height on my container, I'm not explicitly specifying its height - so my element should get an auto height. And that's exactly what Webkit - and all other browsers - do.

Second, the workaround I found:

If I set my container element to display:table with height:inherit it acts exactly the same way as if I'd give it a min-height of 100%. And - more importantly - if I set the child element to display:table-cell it will perfectly inherit the height of the container element - whether it's 100% or more.

Full CSS:

html, body {
  height: 100%;
  margin: 0;
}

#container {
  background: green;
  display: table;
  height: inherit;
  width: 100%;
}

#content {
  background: red;
  display: table-cell;
}

The markup:

<div id="container">
  <div id="content">
      <p>content</p>
  </div>
</div>

See http://jsfiddle.net/xrebB/54/.

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {  display: block;  position:absolute;  height:auto;  bottom:0;  top:0;  left:0;  right:0;  margin-top:20px;  margin-bottom:20px;  margin-right:80px;  margin-left:80px;  background-color: green;}

<div class="stretchedToMargin">  Hello, world</div>

Parent div not taking 100% height of container div

looks like you are looking for sticky footer somehow.
You can achieve what you are looking for using display properties used by <table> and set them to your <div>.
Footer, then needs to be a child too.
The idea is : a full height table display with 3 rows with middle one taking as much room as possible .
http://jsfiddle.net/e62Wu/28/

<div id="wrap">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <div class="navbar-text ">HEADER</div>
        </div>
    </div>
    <div class="container">
        <div class="parentbox">
            <div class="header">
                 <h3>
            <span class="glyphicon glyphicon-user"></span><span style="margin-left:5px;">test</span>
        </h3>

            </div>
            <!-- header div end -->
            <div class="childbox">
                <table class="table table-hover">
                    <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                    </tr>
                    <tr>
                        <td>Jill</td>
                        <td>Smith</td>
                        <td>50</td>
                    </tr>
                    <tr>
                        <td>Eve</td>
                        <td>Jackson</td>
                        <td>94</td>
                    </tr>
                </table>
            </div>
            <!-- childbox-content div end -->
        </div>
        <!-- parentbox div end -->
    </div>
    <!-- container div end -->
    <div id="footer"><!-- back inside -->
        <div class="container">
            <p class="text-muted credit">FOOTER</p>
        </div>
    </div>
</div>
<!-- wrap div end -->

And here basicly CSS needed to dispatch table layout properties:
This will use typical behavior of table elements. If you dislike it , display : flex; instead of display:table; can be used too , but this is still much too young in CSS to be solid IE8-10 will not understand it at all
.

html, body, #wrap {
    height:100%;
    width:100%;
    margin:0;
    /* to include borders and padding inside size calculation */
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#wrap {
    display:table;
}
.navbar, #wrap > .container, #footer {
    display:table-row;
    background:lime;
}
#wrap > .container {
    height:100%;
    background:turquoise;
}

This needs at least IE8 .

Beside for your question : % heights inherits values only from height in direct parent CSS. min-height is no référence for height nor even min-height.