0

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

布局

这是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但是当有更多内容时，它会继续告诉内容结束。

如果您不能理解，我很抱歉。

4

2 回答 2

1

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

小提琴

标记

<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;
}
于 2013-07-18T12:55:54.657 回答
1

这是你想要的吗？

JSFiddle这里

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

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

我希望这会有所帮助:) 否则，我并没有很好地理解这个问题。

编辑：这种方法的问题在于

position:absolute;

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

于 2013-07-17T23:06:42.460 回答