Question

如果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>

这有什么问题，它为什么要出去？

Answer 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*/
}

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

1 个答案: