Question

我遇到了一些麻烦，试图让我的页脚停留在我的页面底部，我能找到的唯一教程有一个固定的位置，我不想要它。我只是希望页脚停留在页面底部，所以如果版权行在页面上向下1000px，那就是页脚所在的位置。现在它位于页面的顶部，正好在标题之下，它不应该。

我的代码（html）：

<body>
    <div id="footer">

            <div class="CopyrightLine">
            &copy; Copyright
            </div>

        </div>
</body>

我的代码（css）：

    #footer{
    width: 100%;
    height: 200px;
    background-color: #000000;
    float: left;
    bottom: 0;
}

编辑：

我现在已将代码更改为这样。

    #footer{
    width: 100%;
    height: 200px;
    background-color: #000000;
    bottom: 0;
    position: absolute;
}

.CopyrightLine{
    position: relative;
    left: 50%;
    margin-left: -70px; /*half the image width*/
    color: #ffffff;
}

但它仍然无法工作，即使我在上面制作了大量文字，试图让它移动。

Answer 1

你可以在页脚上使用绝对位置，如下所示。

http://jsfiddle.net/a5q2u4bv/1/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 150px;
}
footer {
    background: silver;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
}

<body>
    <main>main</main>
    <footer>footer</footer>
</body>

Answer 2

1：你为什么要漂浮？ float: left如果没有任何目的，可以轻松删除。浮动也可能导致定位问题，并且是它无法工作的原因。

2：bottom属性仅在元素不是position: static时才有效。如果未指定，则默认为position: static。 position: absolute可能就是你想要的。

3：您的网站是否还有垂直滚动条（内容如此之多，以便您可以滚动它）？如果您向网站添加更多内容，以便在网站上成为滚动条，并且您的页脚代码在HTML中最远，那么它可能会在底部而不指定更多内容。演示：http://fiddle.jshell.net/j1hhc98v/2/

Answer 3

没关系，我把它修好了，如果有人遇到同样的问题，我会把代码留在这里。

html部分：

<body>

        <div id="header">

        </div>

        <div id="container">

        <div id="content">

        </div>

        </div>

        <div id="footer">

        </div>


</body>

css part：

body {
    padding:0;
    height:100%;
}

body > #container {
    height: auto; 
    min-height: 100%;
}

html {
    height:100%;
}   

#footer{
    width: 100%;
    height: 200px;
    background-color: #000000;
    z-index: 10;
    margin-top: 1000px;
    position: relative;
    clear: both;
}

#content{
    padding-bottom: 200px;
}

#container{
    height:100%;
}

#header {
    width: 100%;
    height: 200px;
    background-color: #000000;
    float: left;
    position: relative;
}

Answer 4

查看此粘性页脚网站。这可能就是你要找的东西。

这是我看到并仍然使用的第一个。 http://ryanfait.com/sticky-footer/

然而CSS技巧也很好。非常相似，但使用伪：而不是div。 https://css-tricks.com/snippets/css/sticky-footer/

页脚不会停留在页面底部

4 个答案: