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

现在看工作编辑

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

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