我的网站结构是这样的:
<body>
<div class="main">
<div class="header">
content
</div>
<div class="section">
content
</div>
<div class="sidebar">
content
</div>
<div class="clearing"></div>
<div class="footer">
content
</div>
</div>
</body>
和CSS
.main {
position:relative;
width:908px;
margin-top:0px;
border:solid 0px;
margin:0 auto;
}
.header {
position:relative;
height:200px;
margin: auto;
}
div.section {
float:left;
position:absolute;
width: 584px;
height:500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
div.sidebar{
float:right;
position:relative;
width: 324px;
height:500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align:left;
}
.clearing {
clear:both;
}
.footer {
position:relative;
left:0px;
top:0px;
width:908px;
height:300px;
}
当我向 div 部分添加内容时,我会遍历页脚。页脚固定在该点,随着内容的添加,页面会增长,而页脚保持静止。
每次添加内容时我必须做的是在 css 文件中增加部分的高度或侧边栏的高度 - 任何一个都可以 - 但我将两个高度(部分和侧边栏)增加到相同的值,因为这似乎是正确的做法。然后随着部分的高度和侧边栏的增长,页脚被向下推。
但是,如果我将高度归因于我添加到该部分的内容,它不会对页脚的位置产生任何影响,可能是因为它与部分本身的高度无关。
有没有办法让页脚响应要添加的内容将占用的空间,并自动移动,留在页面底部?