3

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

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

3 回答 3

0

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

于 2013-06-04T07:17:14.987 回答
0 
<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-04T07:08:22.313 回答
0

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

于 2013-06-04T07:07:19.380 回答