Question

有没有办法阻止main_wrapper重叠页脚？页脚必须保持和定位：绝对，以便它在浏览器的底部保持刷新。

#page_contain {
    min-height: 100%;
    position: relative;
}

#main_wrapper {
    width: 950px;
    height: 800px;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
}

#footer {
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}

HTML

<div id="page_contain"></div>
<div id="main_wrapper"></div>
<div id="footer">
line 1 <br />
line 2 <br />
line 2 <br />
line 2 <br />
line 2 <br />
line 2 <br />
</div>

Answer 1

解决此问题的更好方法是对页脚应用固定定位，使其始终位于屏幕底部。这是你在jsfiddle中的代码：

http://jsfiddle.net/bnryh/

Answer 2

将z-index属性应用于页脚：

#footer{
    [...]
    z-index: 50;
}

Answer 3

#page_contain {
    min-height: 100%;
    position: relative;
}
#main_wrapper {
    width: 950px;
    height: 100%;
    margin: 0 auto 25px auto;
    position: relative;
    border: 1px solid #000;
    padding-bottom:100px;
}
#footer {
    clear:both;
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: Verdana;
}

div压倒定位？

3 个答案: