CSS 粘性页脚 - 永远不适合我
我已经尝试让这项工作工作有一段时间了,但似乎从未成功。我认为这是因为我的 HTML 结构与示例中的结构略有不同。我的问题是,在小于视口的页面上,页脚不会自动推到底部,并且 #main div 不会扩展到页脚。
这是我的 HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
这是我的基本 CSS,没有实现 CSS 粘性页脚:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
澄清一下: 假设 div#main 的背景是黑色。现在假设,在一个页面上,div#main 中只有 1 行文本。所以我想让 #main 区域一直延伸到页脚(位于页面底部),即使没有足够的内容来强制这种情况发生。有道理吗?
还有一件事。 #main 区域的背景颜色与正文不同。所以 #main 背景必须一直延伸到页脚,因为如果有间隙,主体颜色就会穿过
I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.
Here's my HTML:
<html>
<body>
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
And here would be my basic CSS, without implementation of CSS Sticky Footer:
div#container {
width:960px;
margin:0 auto;
}
div#main {
background-color:black
padding-bottom:30px;
}
div#content {
width:425px;
}
div#footer {
position:relative;
bottom:0;
width:inherit;
height:90px;
}
To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?
And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
发布评论
评论(5)
在这里:http://matthewjamestaylor.com/blog /keeping-footers-at-the-bottom-of-the-page
编辑
使用上面文章中的技术(经过测试 - 和在小提琴中工作) :
HTML
<html>
<head>
</head>
<body>
<div id='container'>
<div id='main'>
<div id='content'>Hello</div>
</div>
<div id='footer'> </div>
</div>
</body>
</html>
CSS
html, body {
margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
background-color: #333;
}
div#container {
min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
padding-bottom:90px; margin:0; padding:10px;
}
div#content {
width:425px;
}
div#footer {
position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}
尝试使用页脚 div 的绝对位置
<div id='container'>
<div id='main'>
<div id='content'> </div>
</div>
<div id='footer'> </div>
</div>
确保主体高度为 100%
html,body
{ height:100%;
padding:0;
margin:0;
}
div#container {
width:960px;
margin:0 auto;
position:relative;
height:100%;
}
div#main {
background-color:black;
padding-bottom:90px;
}
div#content {
width:425px;
}
div#footer {
position:absolute;
bottom:0;
width:inherit;
height:90px;
width:960px;
}
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
尝试将页脚设为
position:fixed
。http://jsfiddle.net/QwJyp/
更新
我有点更近:http://jsfiddle.net/QwJyp/1/。也许有人可以构建它。如果删除定义了
!important
的行,它会允许显示height:100%
的 main 部分。但是 div 底部仍然有很多额外的填充,我无法弄清楚。稍后当我有更多时间时我会继续。祝你好运!希望这有助于一些方向。Try making the footer
position:fixed
.http://jsfiddle.net/QwJyp/
Update
I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with
!important
defined, it allows the main withheight:100%
to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.