4

黄色のDIVが一番下まで伸びない理由を誰かに説明してもらえますか?

高さ、最小高さなどのさまざまな順列を試しましたが、役に立ちませんでした。

代わりにテーブルを使用する必要がありますか? :-)

ページの出力は次のとおりです。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>
4

2 に答える 2

5

の前min-heightに、単にプレーンheight: 100%;をに追加し#mainContainerます。

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

ただし、 のパディング (および幅) も削除する必要があり#mainContentます。min-heightは、パディングとマージンを考慮せずに計算されるため、それらをそのままにしておくと、#mainContent常にブラウザー ウィンドウよりも高くなります。

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

于 2012-09-27T13:47:59.757 に答える
1

今作品を見るEDIT

実際には、親クラスの高さを設定しました 100% 削除を設定min-

 #mainContainer {
            width: 100%;
            padding: 0px;
            background-color: #EEEEEE;
            height: 100%;
        }
于 2012-09-27T13:51:51.083 に答える