Question

现在我已经看到了同样的问题，但它们都是不同的。一个用于花车，另一个用于三个不同的div。这只是父母和孩子。这很简单，但我做错了。这就是网站布局的样子：

Layout

这是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一旦到达内容结尾时#content自动停止高度。我希望它像#main一样延伸到页面的末尾，但是当有更多内容时，它会继续告诉内容结束。

如果您无法理解，请向我解释如此抱歉。

Answer 1

这是你想要的吗？

JSFiddle Here

我已将此添加到您的主容器中，这样它总是将您的div填充到顶部＆amp;父div的底部：

#main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70%;
}

我希望这有帮助:)否则，我真的不太了解这个问题。

<小时/> 编辑：这种方法的问题是

position:absolute;

对孩子的规则，导致父母不被填充到孩子的底部，导致相对的页脚不会在#main div之后浮动。我调整了alp的例子Here。仅使用相对div，我认为这就是你要找的东西。

Answer 2

也许你正在寻找这样的东西：

<强> FIDDLE

标记

<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;
}

CSS父级和子级扩展包含内容的页面

2 个答案:

标记

CSS