Question

我的网页存在问题。问题是内容属于页脚。

请在此处查看我的问题 http://www.webdevout.net/test?0138

容器是

height:100%

position:relative 页脚是absolute和bottom:0; 我认为页脚是这样制作的，我错过了什么？我需要页脚始终与内容保持50px（可能）的距离。

Answer 1

在这种情况下，您不需要绝对位置，因为您只想遵循正确的页面流;绝对位置不考虑其他元素，因此您的页脚悬停您的内容是合乎逻辑的。

只需删除绝对位置并添加一些边距。 ;）

Answer 2

如果从页脚中删除绝对位置，你就可以了，然后放置50px的边距顶部;

div.footer {
  height: 70px;
  width: 100%;
  padding: 10px;
  padding-left: 20px;
  background: #F2F2F2;
  border-top: 1px solid #ccc;
  clear: both;
  margin-top: 50px;
}

Answer 3

由于.footer具有绝对位置，因此它不会“进一步”推动html内容。如果你添加 padding-bottom：40px; 至 div.main {

看起来很好。

这会使.main更大

div.main {
width:800px;
min-height:400px;
margin-top:40px;
padding-bottom: 40px;
padding-left:20px;
}

Answer 4

在使用Firebug进行检查后，我发现从CSS中的div.footer类中删除“position：absolute”可以解决问题。

内容在页脚下

4 个答案: