DIV within DIV 100% height, the age old riddle

Question

Can someone please explain to me why the yellow colored DIV doesn't stretch to the bottom?

I have tried various permutations of height, min-height, etc., but to no avail.

Should I just use tables instead? :-)

Here is the output of the page: http://pastehtml.com/view/cd1ibk3vx.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            height: 100%;
        }

        #mainContainer {
            width: 100%;
            padding: 0px;
            background-color: #EEEEEE;
            min-height: 100%;
        }

        #mainContent {
            width: 800px;
            margin: 0px auto 0px auto;
            padding: 100px 50px 50px 50px;
            background-color: #FFFFCC;
            min-height: 100%;
        }
    </style>
</head>

<body>
<div id='mainContainer'>
    <div id='mainContent'>Why doesn't this stretch to bottom?</div>
</div>
</body>
</html>

Possible duplicate of http://stackoverflow.com/questions/25238/100-min-height-css-layout — Blazemonger, Sep 27 '12 at 13:52

score 5 · Answer 1 · answered Sep 27 '12 at 13:47

Before min-height, add just plain height: 100%; to #mainContainer.

    #mainContainer {
        width: 100%;
        padding: 0px;
        background-color: #EEEEEE;
        height: 100%;
        min-height: 100%;
    }

You'll also need to remove the padding (and width) on #mainContent, though. min-height is computed without padding and margins taken into account, so if you leave those in, #mainContent will always be taller than the browser window.

http://jsfiddle.net/mQuh5/1/

score 1 · Answer 2 · answered Sep 27 '12 at 13:51

1

See now work EDIT

actually you have set parent class height set 100% remove min-

 #mainContainer {
            width: 100%;
            padding: 0px;
            background-color: #EEEEEE;
            height: 100%;
        }

answered Sep 27 '12 at 13:51

Sender

6,660
12
47
66

Ah yes, seems to be the padding that was causing me grief. I'll nest another DIV in there to get my padding then. Thanks! – user1703469 Sep 27 '12 at 14:29

DIV within DIV 100% height, the age old riddle

2 Answers2