现在我到处都看到了同样的问题，但它们都是不同的。一个用于 float ，另一个用于三个不同的 div。这只是 parent 和 child 。这很简单，但我做错了什么。这是网站布局的样子:
这是 HTML:
<body>
<div id="header">
<?php include("../includes/navbar.php"); ?>
<div style="clear: both;"></div>
</div>
<div id="main">
<div id="main-container">
test<br>
</div>
</div>
<div id="footer">
<?php include("../includes/footer.php"); ?>
</div>
</body>
还有 CSS:
html, body, ul, p {
margin:0;
padding:0;
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
font-weight:200;
}
#header {
position:fixed;
background:#222;
color:#999;
width:100%;
margin:0px;
padding:0px;
top:0;
z-index:1;
height:5%;
}
#main {
margin-top:2.4%;
background:#f0f0f0;
position:relative;
padding:0;
width:100%;
color:#222;
min-height:100%;
height: auto;
overflow:hiden;
}
#main-container{
background:#fff;
word-wrap:break-word;
margin-right:15%;
margin-left:15%;
border-left:3px solid #d5d5d5;
border-right:3px solid #d5d5d5;
border-bottom-right-radius:50px 50px;
border-bottom-left-radius:50px 50px;
min-height: 100%;
color:#222;
}
#footer {
font: 20px Tahoma, Helvetica, Arial, Sans-Serif;
text-align:center;
width:100%;
height:10%;
color: #222;
text-shadow: 0px 2px 5px #555;
background:#474747;
}
现在使用上面的代码，如果内容超出页面底部，#main 和 #content 将继续运行，直到内容结束。问题是当 #main 的高度为 auto 时，#content 在到达内容末尾时停止。我希望它像 #main 一样扩展到页面末尾，但是当有更多内容时，它会继续告诉内容结束。
由我来解释，如有不明白之处请见谅
最佳答案
也许您正在寻找这样的东西:
标记
<div id="header">
<h1>Main Title of Web Page</h1></div>
<div id="main">
<div id="main-content">
Content</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © something</div>
CSS
#main
{
height: 100%;
background: pink;
margin: -37px 100px -20px 100px;
padding: 37px 0 20px 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#main-content {
overflow:auto;
height:100%;
min-height: 100%;
}
#header
{
position: relative;
z-index:1;
height: 37px;
background:orange;
}
#footer
{
height: 20px;
position: relative;
z-index:1;
}
关于html - CSS父子扩展页面内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17711618/