相关疑难解决方法(0)

我有一个简单的2列布局,页脚可以清除标记中的左右div.我的问题是我无法在所有浏览器中让页脚停留在页面底部.如果内容向下推动页脚,它就可以工作,但情况并非总是如此.

更新:

它在Firefox中无法正常工作.当页面上没有足够的内容将页脚一直向下推到浏览器窗口的底部时,我在页脚下方看到一条背景颜色条.不幸的是,这是页面的默认状态.

我想将页脚放在页面底部,它还有一个固定的标题...

• 不是position: fixed - 我不希望它留在屏幕上,它应该只是在页面的末尾,并在滚动时表现正常.

• 不在可见屏幕的底部 - 在页面的底部,即; 毕竟其他内容.

这是一个更好地解释的图表:

这是代码:

• 我准备了一个演示:JSFiddle
• 或者见下文

<div id="header">Header</div>
<div id="content">
    <p>Some content...</p>    
</div>
<div id="footer">Footer</div>

body{
    /* Just to enable scrolling in JSFiddle */
    height: 1000px;
}

#header{
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0px;
    z-index: 1;
}

#content{
    width: 100%;
    position: absolute;
    top: 100px; /*Height of header*/
    z-index: 0;
}

#footer{
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0px;
}

/*For demo only*/
#header, #footer{
    border: …