Question

我的页面底部有一个固定的页脚：

#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999; 
width: 900px;
bottom: 0px;
height: 30px;
}

但我没有设法阻止文本进入页脚。对于文本区域，我使用此css：

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 30px 0em;
}

我已经尝试了不同的边距和填充，但似乎它们对行为没有影响。文本始终运行到页面底部并覆盖页脚。

我在网上发现了很多类似的问题，但没有答案解决了我的问题。

您是否知道如何阻止文本进入页脚？

谢谢！

Answer 1

由于您的页脚位置为fixed，因此它会忽略定位它的主要内容。因此，主要内容可以重叠。尝试在页脚上放置一个不透明的背景并将其放在主要内容的前面（z-index）

#footer { background-color: white; z-index: 10 }
#content {z-index: 0}

z-index表示哪个框在另一个框上（例如photoshop图层）

Answer 2

你的内容已经有30px填充底部就可以了。要修剪页脚并让文本位于页脚后面，只需指定页脚的z-index即可。尝试添加：z-index: 15;

Answer 3

#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999; 
width: 900px;
bottom: 0px;
height: 30px;
}

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 30px 0em;
}

我可能不会在内容上使用填充。如果您知道脚的高度（例如，他们在Facebook上，固定页脚总是具有相同的高度），那么我会给#content一个边缘底部与该高度+例如10px的。

然后 - 就像其他人说的那样，我会使用z-index（如下例所示）：

#footer的 { 位置：固定; 明确：两者; text-align：right; 颜色：灰色; 字体大小：12像素; border-top：1px solid＃999; 宽度：900px; 底部：0px; 身高：30px; z-index：15; }

#content {
  margin-left: 2.25em;
  margin-top: 8em;
  padding: .5em .5em 0 0;
  margin: 0 0 30px 0;
  z-index: 10;
}

请告诉我这是否对您有用！

Answer 4

添加#content样式 - z-index小于页脚z-index 添加#content style - float：left和display：inline-block

文本进入固定页脚

4 个答案: