在调整大小时将页脚保持在底部（位置：绝对）答案

【问题标题】：Keep footer at the bottom (position: absolute) at the bottom while resizing [duplicate]在调整大小时将页脚保持在底部（位置：绝对）
【发布时间】：2013-06-04 07:00:18
【问题描述】：

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

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>

【问题讨论】：

它在这个jsFiddle中工作
stackoverflow.com/questions/15893275/… 可以帮到你

标签： html css

【解决方案1】：

我建议将页脚的 Zindex 设置为某个非常高的值，并将主要内容设置为 1 左右。这应该可以解决您的问题。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我没有看到您描述的问题。对我来说，页脚位于窗口底部的所有其他内容之上。我的猜测是浏览器问题或您的描述不清楚。

【讨论】：