我正在为学校网站编写一些 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 的大小，以便将页脚向下推
最佳答案
你为什么要使用绝对位置？从所有的 DIV 中删除所有 position: absolute 它们不是必需的。改为使用边距定位它们，您不会遇到 DIV 更改大小的问题。
正如 Mathew 提到的，当您使用 position: absolute 属性时，它会将该元素从文档流中移除，因此它不会影响它周围的元素。您所有的 DIV 都按照您希望它们显示的顺序排列，不需要对它们进行绝对定位。
只是取出定位并弄乱包装器的填充以获得您正在尝试的相同东西 - http://jsfiddle.net/n3Xqx/
关于css - Div 调整大小无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9355699/