Question

有人可以向我解释为什么黄色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>

Answer 1

在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/

Answer 2

立即查看作品 EDIT

实际上你已将父类高度设置为100％删除min-

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

DIV在DIV内100％高度，这个古老的谜语

2 个答案: