0

最初の最も外側の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>
4

1 に答える 1

0

min-heightCSSで設定する代わりに、設定するだけです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 に答える