Question

一开始一切正常。我有中间元素和页脚。这是我想要的方式。但是当我调整窗口大小时，页脚会在主元素后面。这是代码。我如何努力在底部制作页脚棒（它不是一个固定的定位）？

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>

Answer 1

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

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

Answer 3

我没有看到你所描述的问题。对我来说，页脚仍然位于窗口底部的其他所有位置。我的猜测是浏览器问题，或者您的说明不明确。

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

3 个答案: