Question

似乎我只能将第一个最外层的div（#base_wrapper）设置为100％。我还没有找到一种方法将任何内部嵌套div的高度设置为100％高度。

有谁知道如何正确地做到这一点？

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

Answer 1

不要在CSS中设置min-height，只需设置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;
}

有关详细信息，请参阅： Percentage Height HTML 5/CSS

如何将嵌套的内部div设置为100％高度？

1 个答案: