0

我想疯了，如果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>

这有什么问题，为什么会消失？

4

1 回答 1

0

也许这可以解决您的问题。里面的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*/
}
于 2012-08-02T15:36:19.547 回答