我正在尝试创建一个页面，该页面将根据我的主要 content div 调整大小。目前，当我将 content div 设置为 height: 1000px 时，它会覆盖我的页脚 div。我该如何更改它以便它随着我的 content div 展开？
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Layout</title>
<link rel="stylesheet" type="text/css" href="../styles/layout.css">
</head>
<body>
<div class="top">
</div>
<div class="left">
</div>
<div class="right">
<div class="content">
<h1>Page Content</h1>
</div>
</div>
<div class="preFooter">
</div>
<div class="myFooter">
</div>
</body>
</html>
CSS:
*{
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
}
html,body { height:100%; }
h1{
text-align: center;
padding: 5px;
}
.left{
float: left;
width: 20%;
background-color: #757475;
height: 100%;
}
.right{
float: right;
width: 80%;
background-color: #e9eaed;
height: 100%;
}
.top{
overflow : hidden;
height: 10%;
background-color: #333333;
width: 100%;
}
.preFooter{
overflow : hidden;
height: 20%;
background-color: #ffffff;
width: 100%;
}
.myFooter{
overflow: hidden;
height: 40%;
background-color: #333333;
width: 100%;
}
.content{
margin-top: 5%;
width: 80%;
margin-left: auto;
margin-right: auto;
background-color: white;
height: 1000px;
border-radius: 25px;
}
最佳答案
.content 的包含元素是 float 的 .right。 float 元素从不包含在它们的父元素中。这就是它扩展到元素底部之外的原因。
关于html - 页面不会随 DIV 展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29190608/