Parent div not taking 100% height of container div

Question

I've got 4 nested div 's naming: wrap > container > parentBox > childBox .

Container div is 100% minus 70px (70px is the height of the footer (60) plus 10px = 70px).

I want the parentBox take the rest of the height (100%) the container div has left. And I want childBox take 100% of the parentBox div , minus the header (also inside the parentBox containing the word 'test') which is 40px heigh;

But the result I get is that the parentBox and childBox taking the minimum height of what the table's height is.

I came across a few posts about this here on SO, but none of them helped me with this issue.

Why is this not working?

See jsFiddle

EDIT: The code which I think is relevant:

#wrap {
      height: 100%;
      /* Negative indent footer by its height */
      margin: 0 auto -60px;
      /* Pad bottom by footer height */
      padding: 0 0 60px 0px;
    }

.parentbox {
    width: 100%;
    padding: 0px 3px 5px 5px;
    margin-bottom: 0px;
    overflow: hidden;
    min-height:100%;
    border:1px solid #000;
}

.childbox {
    overflow: auto;
    overflow-x: hidden;
    min-height:100%;
    border:1px solid #000;
}

Answer 1

.parentBox和.childBox只有一个min-height声明，根据我的理解，这只会深入一级 - 意味着.childBox永远不会知道100％的实际大小。

Answer 2

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 .

Answer 3

I'm not sure I understand your question, but try removing height: 100%; from #wrap > .container .