Question

我正在为一个看起来像这样的学校网站写一些css代码

body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}



div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}

div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}

#wrapper {
width:960px;
margin:0pt auto;
}

#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}

#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}

#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}

#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}

#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}

使用如下所示的html：

<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>

（忽略大括号中的内容。它是我们学校使用的网站编辑器）因此，当我进入我的页面并输入内容时，它会重新调整大小并落后于页脚。然而，我打算做的是在重新调整大小以适应内容时按下页脚。早些时候它表现得这样，所以我做错了什么？

编辑：我想我一开始不够清楚，我希望父#content div用内容主div调整大小，以便按下页脚

Answer 1

不要使用position: absolute;，它会使常规文档流程中的内容消失。

编辑：如果您需要在页眉/页脚/内容区域之间提供更多垂直间距，请使用margin

Answer 2

你为什么要使用绝对位置？从您不需要的所有DIV中删除所有position: absolute。使用边距来定位它们，你就不会有DIV改变尺寸的问题。

正如Mathew所提到的，当你使用position: absolute属性时，它会从文档流中取出该元素，因此它不会影响它周围的元素。所有DIV都按照您希望它们显示的顺序排列，不需要对它们进行绝对定位。

刚刚取出定位并与包装的填充混乱，以获得您正在尝试的相同内容 - http://jsfiddle.net/n3Xqx/

Answer 3

添加相对于包装器的位置。将内容和页脚的绝对位置替换为相对位置。请参阅我已更新下面的CSS

#wrapper {
width:960px;
margin:0pt auto;
position:relative;
}

#content{
width:850px;
min-height:694px;
left:98px;
top:150px;
position:relative;
}
#content-main{
width:100%;
min-height:594px;
position:relative;
top:0px;
}
#footer{
width:100%;
height:100px;
background:#DDDDDD;
bottom:0px;
border-top:5px solid #AAAAAA;
position:relative;
}

Div调整大小不正常

3 个答案: