0

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>
4

1 回答 1

0

而不是min-height在你的 CSS 中设置，只需设置height.

生成的代码应该可以工作：

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

有关更多信息，请参阅： 百分比高度 HTML 5/CSS

于 2013-02-24T22:27:25.810 回答