调整内容大小以适应高度 CSS 溢出？答案

【问题标题】：Resizing content to fit height CSS overflowing?调整内容大小以适应高度 CSS 溢出？
【发布时间】：2012-08-02 23:36:19
【问题描述】：

我想疯了，如果height: 100%; 拉伸一个元素以适应其父高度，为什么它会溢出？我正在几个浏览器中进行测试，所有浏览器都显示相同的问题。

我有这个结构

html
>body
>>container
>>>header
>>>content
>>>footer

我想要的是拉伸内容高度，以便容器适合浏览器窗口

我尝试了很多不同的方法，将 html 和正文高度设置为 100%，追求绝对值和零的顶部和底部......但没有任何效果，每当我拉伸内容时，页脚就会跳出容器

这是一个例子：

<!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>

这是怎么回事，为什么会消失？

【问题讨论】：

您将容器高度设为 100%。然后添加 div。您的内容 div 的高度也至少为 100%。因此，所有 div 加在一起肯定比容器大并溢出。你的内容高度搞砸了
这只是我尝试的示例之一，我需要让容器拉伸内容，我通过说它占据 100% 的空间来做到这一点，我怎么说内容占用剩余空间？
然后只需制作一个固定定位的页脚，并为内容提供一个带有页脚高度的底部边距。

标签： html css height

【解决方案1】：

也许这可以解决您的问题。里面的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*/
}

【讨论】：

这不起作用，因为页眉和页脚在我的情况下都有一个固定的高度，因为它们的内容没有改变，它是..内容的内容发生了变化，我希望它在屏幕大于内容