How to set nested inner divs to 100% height?

Question

It seems I can only set the first outermost div (#base_wrapper) to 100% heigth. I have not found a way to set the hight of any of the inner nested divs to 100% height.

Does anyone know how to properly do this?

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html {
                height: 100%;
            }
            body {
                background-color: #FFF;
                font-family: helvetica, arial, sans-serif;
                font-size: 10pt;
                color: #000;
                margin: 0px;
                padding: 0px;
                height: 100%;
                border: none;
            }
            #base_wrapper {
                min-height: 100%;
                background-color: #F00;
            }
            #base_inner_wrapper {
                min-height: 100%; /* does not work */
                padding-bottom: 16px;
                background-color: #0F0;
            }
            #base_body {
                min-height: 100%; /* does not work */
                background-color: #00F;
            }
            #base_statusbar {
                background: #25272B;
                height: 16px;
            }
            #base_footer {
                height: 16px;
                width: 100%;
                color: #F47920;
                position: absolute;
                bottom: 0;
                background: #25272B;
            }
        </style>
    </head>

    <body>
        <div id="base_wrapper">
            <div id="base_statusbar">
                HEADER
            </div>
            <div id="base_inner_wrapper">
                <div id="base_body">
                    CONTENT
                </div>
            </div>
            <div id="base_footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

3 divs inside a div and each have a 100% height? 300%? – Ali Bassam Feb 24 '13 at 19:15 — Ali Bassam, Feb 24 '13 at 19:15

score 0 · Answer 1 · edited May 23 '17 at 12:03

Instead of setting min-height in your CSS, just set height.

The resulting code should work:

body {
    background-color: #FFF;
    font-family: helvetica, arial, sans-serif;
    font-size: 10pt;
    color: #000;
    margin: 0px;
    padding: 0px;
    height: 100%; /* changed from min-height */
    border: none;
}
#base_wrapper {
    height: 100%; /* changed from min-height */
    background-color: #F00;
}
#base_inner_wrapper {
    height: 100%; /* changed from min-height */
    padding-bottom: 16px;
    background-color: #0F0;
}
#base_body {
    height: 100%; /* changed from min-height */
    background-color: #00F;
}

For more information, see: Percentage Height HTML 5/CSS

How to set nested inner divs to 100% height?

1 Answers1