谁能给我解释一下为什么黄色的 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>
最佳答案
在 min-height 之前，将简单的 height: 100%; 添加到 #mainContainer。
#mainContainer {
width: 100%;
padding: 0px;
background-color: #EEEEEE;
height: 100%;
min-height: 100%;
}
不过，您还需要删除 #mainContent 上的填充(和宽度)。 min-height 是在不考虑填充和边距的情况下计算的，因此如果您保留它们，#mainContent 将始终高于浏览器窗口。
关于css - DIV 在 DIV 100% 高度内，古老的谜语，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12622815/