如果 height: 100%; 拉伸(stretch)一个元素以适应其父元素的高度，我觉得很疯狂，为什么它会溢出？我正在多个浏览器中进行测试，它们都显示出相同的问题。
我有这个结构
html
>body
>>container
>>>header
>>>content
>>>footer
我想要的是拉伸(stretch)内容高度以便容器适合浏览器窗口
我尝试了很多不同的方法，将 html 和 body 高度设置为 100%，将绝对值和顶部和底部设置为零……但没有任何效果，每当我拉伸(stretch)内容时，页脚就会跳出容器
举个例子:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
#container
{
height: 100%;
}
#content
{
min-height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
1
</div>
<div id="content">
2
</div>
<div id="footer">
3
</div>
</div>
</body>
</html>
这是怎么回事，为什么会熄灭？
最佳答案
也许这可以解决您的问题。里面的div需要加起来100%
body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#container
{
height: 100%;
}
#header{
height: 20%; /*random number but all three should add up to 100%*/
}
#content
{
min-height: 70%; /*random number*/
}
#footer{
height:10%; /*random number*/
}
关于html - 调整内容大小以适应高度 CSS 溢出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11780595/