在底部保持页脚底部（位置：绝对），同时调整大小

开始时一切正常。我有中间元素和页脚。这是我想要的方式。但是当我调整窗口的大小时，页脚会落在主要元素的后面。这是代码。我将如何努力使页脚粘在底部（它不是固定的位置）？在底部保持页脚底部（位置：绝对），同时调整大小

body{ 
    height: 100%; 
    width: 100%; 
} 
.mainContent{ 
    width: 200px; 
    height: 100px; 
    border: 1px solid #222; 
    margin-top: -50px; 
    margin-left: -100px; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 
.footer{ 
    height: 20px; 
    background: #444; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    left: 0; 
}

HTML

<html> 
    <head></head> 
    <body> 
    <div class="mainContent"></div> 
    <div class="footer"></div> 
    </body> 
</html>

来源

2013-06-04 besabestin

它可以在这[jsFiddle]（http://jsfiddle.net/3RsD9/） –

http://stackoverflow.com/questions/15893275/css-sticky-footer-with-margin可以帮助你 – krampstudio

我建议页脚的Z-索引设置为一些真正高价值，主要内容围绕什么1.这应该可以解决你的问题。

来源

2013-06-04 07:07:19 JosephGarrone

<style> 
*{ 
margin:0px; 
padding:0px; 
} 
.wrapper { 
height:100%; 
position:relative; 
} 

.mainContent{ 
width: 200px; 
height: 100px; 
border: 1px solid #222; 
margin-top: -50px; 
margin-left: -100px; 
position: absolute; 
top: 50%; 
left: 50%; 
} 

.footer{ 
height: 20px; 
background: #444; 
position: absolute; 
bottom: 0; 
width: 100%; 
left: 0; 
} 
</style> 

<html> 
<head> 
</head> <body> 
<div class="wrapper"> 
<div class="mainContent"></div> 
<div class="footer"></div> 
</div> 

</body> </html>

来源

2013-06-04 07:08:22 IdemeNaHavaj

我没有看到您描述的问题。对我来说，在窗口的底部，页脚仍保留在其他所有内容之上。我的猜测是这是一个浏览器问题，或者你的描述不清楚。

来源

2013-06-04 07:17:14 skzryzg

在底部保持页脚底部（位置：绝对），同时调整大小

回答

相关问题