页脚不会留在页面底部

Question

我遇到了一些麻烦，试图让我的页脚留在我的页面底部，而我能找到的唯一教程有一个固定的位置，这是我不希望的。我只希望页脚位于页面底部，因此如果版权行位于页面下方 1000 像素处，那么页脚将位于此处。现在它在页面的顶部，就在 header 的正下方，它不应该在

我的代码（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

查看这个粘性页脚网站。这可能就是您要找的。

这是我第一次看到并且还在使用。 http://ryanfait.com/sticky-footer/

不过CSS技巧也有一个很好的。非常相似，但使用伪 :after 而不是 div。 https://css-tricks.com/snippets/css/sticky-footer/

Answer 4

没关系，我自己解决了，如果有人有同样的问题，我会留下代码。

html 部分：

<body>

        <div id="header">

        </div>

        <div id="container">

        <div id="content">

        </div>

        </div>

        <div id="footer">

        </div>


</body>

css 部分：

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;
}

页脚不会留在页面底部

Footer won't stay in the bottom of the page

html

css

position

footer