有人可以看看我的 css 并告诉我为什么我不能让我的容器 div 包围我的其他 div 吗？我已将高度设置为 100%，并希望容器 div 成为屏幕的 100%。我尝试了没有运气的 clearfix 方法以及我在 SO 上找到的其他一些方法。任何帮助将不胜感激。
<html>
<body>
<div class="container ">
<div class="header">
</div>
<div class="mainContent">
</div>
<div class="other">
</div>
</div>
</body>
</html>
body{
font-size: 100%;
width:96%;
max-width: 960px;
margin: auto;
background-color: gray;
}
.container
{
position: relative;
width: 100%;
max-width: 960px;
margin: auto;
padding: 1.041666666%;
background-color: white;
}
.header{
position: relative;
width: 100%;
height: 70px;
margin: auto;
background-color: blue;
}
.mainContent{
position: relative;
float: left;
margin-top: 1.041666666%;
width: 62.5%;
height: 100%;
background-color: red;
}
.other{
position: relative;
float: left;
margin: 10px 0 0 1.041666666%;
width: 36.458333333%;
height: 100%;
background-color: green;
}
.clearfix {
clear: both;
}
最佳答案
将以下内容添加到您的 CSS 中
检查这个FIDDLE
html,body{
height:100%;
}
.content{
height: 100%; // calc(100% - 2 x padding);
}
为了在 % 中使用高度，父元素也应该设置它们的高度(在本例中为 html 和 body)。
您可以使用 css calc() 为 maincontent 和其他函数计算准确的高度，如下所示:
height: calc(100% - (70px + total height for margins and paddings) )
关于css - 需要帮助来弄清楚如何清除我的 div 并将页面缩放到 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22334665/