CODEWITHSUNDEEP
htmlcssheighttwitter-bootstrap-3
Quoter
Quoter

Reputation: 4302

Parent div not taking 100% height of container div

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

Upvotes: 0

Views: 1754

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106048

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.

Upvotes: 1

TylerH
TylerH

Reputation: 21078

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

Upvotes: 0

Ted
Ted

Reputation: 14927

Both .parentBox and .childBox only have a min-height declaration, and from what I understand, that will only work one level deep--meaning .childBox will never know what actual size 100% is.

Upvotes: 1

Related Questions