我正在编写一个网页,该网页应该在顶部有一个页眉,在底部有一个页脚,在右侧有一个侧栏。我无法将页脚放在页面底部。我不希望它是 position: fixed(那会很烦人),但我确实希望它在您一直向下滚动时出现在页面底部。 (在不需要滚动的情况下,它应该出现在窗口的底部)
这是我正在使用的。可能有一个非常简单的修复方法,但我不明白它是什么。复制/粘贴此内容,您会看到。
<html>
<head>
<style type="text/css">
body {
font-size: 200%;
}
#side {
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: #0A0;
z-index: 100;
}
#header {
height: 40px;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #A00;
z-index: 200;
}
#header_push {
clear: both;
height: 40px;
}
#footer {
height: 50px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00A;
z-index: 150;
}
#footer_push {
clear: both;
height: 50px;
}
</style>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="header_push"></div>
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
</div>
<div id="side">
SIDE COLUMN
</div>
<div id="footer_push"></div>
<div id="footer">
FOOTER
</div>
</body>
正常工作:
向下滚动时不正确(请参阅页面侧面的滚动条):
最佳答案
您需要将 position
更改为 fixed
关于html - 滚动时页脚不粘在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17902057/