页脚不会停留在页面底部

Question

页脚不会停留在页面底部

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

我的代码（html）：

<body>
    <div id="footer">

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

        </div>
</body>

Run Code Online (Sandbox Code Playgroud)

我的代码（CSS）：

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

Run Code Online (Sandbox Code Playgroud)

编辑：

我现在已将代码更改为如下所示。

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

Run Code Online (Sandbox Code Playgroud)

但它仍然行不通，即使我在上面写了很多文字，试图让它移动。

Answer 1

Sti*_*ers 5

您可以使用以下技巧在页脚上使用绝对位置。

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，7 月前
查看次数：	13996 次
最近记录：	10 年，5 月前