Question

无论内容中有多少文字，我都试图将页脚保持在底部。我究竟做错了什么？布局是：

    .top{
    width:500px;
    height:100px;
    background-color:black;
}

.content{
    width:500px;
    min-height:100%;
    position:relative;
}

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:absolute;
    bottom:0;
}

<div class="top"></div>
<div class="content"></div>
<div class="footer"></div>

http://jsfiddle.net/RDuWn/68/

问候，西蒙

Answer 1

我认为你必须使用position：像这样修复：

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:fixed
    bottom:0;
}

DEMO

Answer 2

我会从position:absolute; bottom:0; Fiddle

中删除.footer

Answer 3

在jsfiddle，

中

.footer{
    width:500px;
    height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

对我有用..

请参阅fiddle

请参阅bottom:-1px;它会确保您在浏览器中的排名......

Answer 4

您的代码有效，但您需要在页脚类中设置min-height而不是height，以便它可以扩展到您的内容大小。

.footer{
    width:500px;
    min-height:100px;
    background-color:blue;
    position:fixed;
    bottom:-1px;
}

Here's how it will look进行了更改，并在页脚中添加了一些占位符内容。

Answer 5

这是你的绝对定位导致了重叠。绝对元素从正常流中移除，并且在确定位置时由其他元素本身“忽略”。如果未在css中指定位置，则默认为静态定位，并且所有元素都将正确地位于“流程”中。

http://www.w3schools.com/css/css_positioning.asp

这是我使用的CSS：

.top{
    width:500px;
    height:100px;
    background-color:pink;
}

.content{
    width:500px;
    min-height:100%;
    background-color:blue;
}

.footer{
    width:500px;
    height:100px;
    background-color:black;
    margin-bottom:0px;
}

中间底部文字的页脚

5 个答案: