如何获得粘性页脚?

时间:2013-03-24 20:30:22

标签: html css sticky-footer

我知道有很多关于粘性页脚的问题,但我似乎无法让它们在我的页面上工作。

任何人都可以帮助我让我的页脚变粘,而不是固定吗?

我的HTML

<div id="container">
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>
</div>

我的CSS

#container {
    width: 980px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto; }

#content {
    width: 100%;
    min-height: 100%;
    margin: 40px 0;  }

#footer {
    width: 3000px;
    min-height: 185px;
    background-color: rgb(0,173,239);
    margin-left: -1000px;  }

我尝试过各种职位(亲戚,固定等),但不起作用。我似乎修复了我的页脚并覆盖了内容。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

试试这个CSS:

body {
    min-height: 100%; }

#container {
    width: 980px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto; }

#content {
    width: 100%;
    min-height: 100%;
    margin: 40px 0;
    margin-bottom: 290px;  }

#footer {
    width: 100%;
    min-height: 185px;
    background-color: rgb(0,173,239);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;  }