我目前正在开发一个需要粘性页脚的网站,但并非在所有地方都有。
所以,http://www.hostcule.org/newsite/
对于主页,页脚会自动粘到底部,但对于其他页面,它不会像http://www.hostcule.org/newsite/about-us
那样我如何使用CSS让它坚持到底?
页脚div的当前CSS
#footer{
clear:both;
float:left;
width:100%;
border-top:solid 1px #d1d0d0;
background-color:#f1efef;
margin-bottom:-10px;
}
答案 0 :(得分:0)
我能做的最好的事情就是将页脚推到页面底部,这样它总是不在屏幕的底部。以下是如何执行此操作的示例。 stickyfooterfail部门不起作用,我不知道为什么,但如果你将bottom
改为绝对,position
属性可以正常工作。
<html>
<head>
<style type='text/css'>
body {
height: 100%;
}
#fullheight {
background:#ff0;
position: relative;
min-height: 100%;
}
#stickyfooterfail {
position: relative;
bottom: 0px;
}
#stickyfooter {
background: #f0f;
}
</style>
</head>
<body>
<div id='fullheight'>
Some text<br>
Some text<br>
Some text<br>
<div id='stickyfooterfail'>
Should be at the bottom but isn't
</div>
</div>
<div id='stickyfooter'>
This is pushed off the bottom by the min-height attribute of #fullheight
</div>
</body>
</html>
如果您知道页脚将是一个恒定的绝对大小,那么您可以将padding-bottom
设置为 - (高度),例如-40px,如果它是40px高,然后设置#{1}} #stickyfooterfail达到相同的价值。