我看过以前的 SO 帖子和 tuts，但我自己的代码没有任何运气。我的页脚不会粘在页面底部(不是窗口)。我不希望内容在我的页脚中滚动。页面大小的长度差异很大，并且希望始终在底部有一个页脚。
leftcol、rightcol 和footer 都在容器中。任何帮助都是极好的。
我的 HTML 结构如下:
<body>
<div id = "container">
<div id = "leftcol">
<h2></h2>
</p>
</div>
<div id = "rightcol">
<h2></h2>
</p>
</div>
<div id ="footer">
<p>...........</p>
</div>
</div>
</body>
这是我的 CSS:
body {
font-family: 'Rokkitt', Georgia, serif;
font-size: 16px;
background-color: #FFFFFF;
line-height: 1.3em;
height: auto;
color: #252525;
}
#container {
display: block;
width: 1024px;
min-height: 100%;
margin-left: auto;
margin-right: auto;
}
#leftcol {
display: block;
float: left;
margin: 20px 5px 5px 15px;
width: 660px;
position: absolute;
height: auto;
padding-bottom: 20px;
}
#rightcol {
display: block;
float: right;
margin: 30px 5px 5px 780px;
position: absolute;
width: 275px;
height: auto;
}
#footer {
position: fixed;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
最佳答案
您需要将页脚移到容器元素和主体元素之外，并使用 position:absolute;底部:0；始终将其固定在 html 元素的底部。
我说在 body 之外是因为，尽管 body 标签主要占用 html 元素的高度，但有些版本的 IE 并非如此。由于您还没有粘贴您的 HTML，我显然无法向您展示修改后的 html，但您的 css 应该如下所示:
#footer {
position: absolute;
bottom: 0;
width: 1024px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
}
关于HTML/CSS 页脚问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12896052/