Question

我正在建立一个网站，页脚不会粘在底部。有人可以帮我解决这个问题吗？

CSS

#footer {
    background-color: #454245;
    bottom: 0;
    float: right;
    height: 200px;
    left: 0;
    margin-top: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

Answer 1

请尝试以下操作： LINK

<强> HTML：

<div class="wrapper">
    <p>Your content goes here.</p>
  <div class="push"></div>
</div>
<div class="footer">
    <p>Footer content</p>
</div>

<强> CSS：

* {
margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer,.push{
    background-color:#ccc;
    height: 155px; 
}

Answer 2

您可以通过position: fixed

设置relative（不是bottom: 0）来设置粘性页脚

#footer {
    background-color: #454245;
    bottom: 0;
    height: 200px;
    overflow: hidden;
    position: fixed;
    width: 100%;
}

Answer 3

您必须提供绝对位置，并且仅当您可以提供具有位置相对的包装器或父div时才会起作用。

请看这个小提琴[http://jsfiddle.net/tLyC6/] 1

Answer 4

如果你想让页脚粘在底部，你可以使用更少的代码来完成。

#footer {
    background-color: #454245;
    height: 200px;
    margin:0 auto;
    width: 100%;
}

css - footer不会粘在底部

4 个答案: