使主要内容位于粘性页脚之上

时间:2013-07-01 12:17:00

标签: html footer sticky

我设置了一个粘性页脚,并希望主要内容位于其上方。

当内容在页脚后面运行时,我想让div#fullContainer坐在页脚上方。这样红色背景就位于页脚上方。

我希望这是有道理的。

<div id="fullContainer" style="background-color:red">
    <div id="container">
        <div id="content" >Text here</div>
    </div>
</div>

<div class="footer" id="container">footer content</div>


.footer {

    border-top:3px solid #ff0000;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 180px;

}    

1 个答案:

答案 0 :(得分:0)

应该这样做 - http://jsfiddle.net/Ballcheck/dp6LS/

刚刚添加了以下容器类 -

#fullContainer {
    position: absolute;
    height: auto;
    width: 100%;
    top: 0px;
    left: 0px;
    bottom: 180px;
}