Question

我目前正在开发一个需要粘性页脚的网站，但并非在所有地方都有。

所以，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;
}

Answer 1

我能做的最好的事情就是将页脚推到页面底部，这样它总是不在屏幕的底部。以下是如何执行此操作的示例。 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达到相同的价值。

粘性页脚比不适用于所有页面

1 个答案: