0

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

    .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/

问候，西蒙

4

5 回答 5

1

我认为您必须像这样使用 position:fixed ：

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

演示

于 2013-02-20T15:31:58.783 回答
0

是你的绝对定位导致了重叠。绝对元素从正常流程中移除，并在确定位置时被其他元素本身“忽略”。如果您未在 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;
}
于 2013-02-20T16:11:02.037 回答
0

您的代码有效，但您需要在页脚类中设置最小高度而不是高度，以便它可以拉伸到您的内容大小。

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

这是更改后的外观，以及添加到页脚的一些占位符内容。

于 2013-02-20T15:34:36.803 回答
0

我会position:absolute; bottom:0;从.footer 小提琴中删除

于 2013-02-20T15:32:17.723 回答
0

在你的jsfiddle中，

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

为我工作..

看小提琴

看到bottom:-1px;它将确保您在浏览器中的位置...

于 2013-02-20T15:32:54.683 回答