文本进入固定页脚
我的页面底部有一个固定的页脚：
#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;
}我已经尝试了不同的边距和填充，但它们似乎对行为没有影响。文本始终运行到页面底部并覆盖页脚。
我在网上发现了很多类似的问题，但没有答案可以解决我的问题。
您知道如何防止文本进入页脚吗？
谢谢！
I have a fixed footer at the bottom of my page:
#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999;
width: 900px;
bottom: 0px;
height: 30px;
}But I didn't manage to prevent the text from running into the footer. For the text area I use this css:
#content {
margin-left: 2.25em;
margin-top: 8em;
padding: .5em .5em 30px 0em;
}I already tried different margins and paddings but it seems like they have no influence on the behavior. The text always runs to the bottom of the page and overwrites the footer.
I found a lot of similar questions on the net but no answer which solved the problem for me.
Do you have an idea how i can prevent the text from running into the footer?
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
由于页脚位置是
固定，因此在定位它时它会忽略主要内容。因此，主要内容可以重叠。尝试在页脚上放置不透明背景并将其放在主要内容的前面（z-index）z-index 表示哪个框位于另一个框之上（例如 Photoshop 图层）
Since you footer position is
fixed, it ignore the main content in positioning it. Thus, the main content can overlap. Try to put a opaque background on the footer and to put it in front of the main content (z-index)The z-index represent which box is over the other (like photoshop layers e.g.)
你的内容已经有 30px 的内边距底部了，没关系。要修复页脚并让文本位于页脚后面，只需指定页脚的 z-index 即可。
尝试添加：
z-index: 15;your content already have 30px padding bottom it's all right. To fixe the footer and lets text go behind the footer just specifie z-index of your footer.
try to add :
z-index: 15;我可能不会在内容上使用填充。如果您知道脚的高度（例如，他们在 Facebook 上知道，其中固定页脚始终具有相同的高度），那么我会给 #content 一个带有该高度的 margin-bottom + 例如 10px。
然后 - 正如其他人所说，我将使用 z-index （如下面的示例）：
#footer
{
位置：固定；
明确：两者；
文本对齐：右对齐；
颜色：灰色；
字体大小：12px；
顶部边框：1px 实心#999；
宽度：900px；
底部：0px；
高度：30px；
z 索引：15；
让
我知道这是否对你有用！
I would probably not use the padding on the content. If you KNOW the height of the foot (e.g. they do on Facebook, where the fixed footer always has the same height), then I would give the #content a margin-bottom with that height + e.g. 10px.
And then - like the others said, I would use z-index (like the below example):
#footer
{
position: fixed;
clear:both;
text-align: right;
color:gray;
font-size:12px;
border-top: 1px solid #999;
width: 900px;
bottom: 0px;
height: 30px;
z-index: 15;
}
Let me know if this worked for you!
添加 #content 样式 - z-index 小于页脚 z-index
添加 #content 样式 - float:left 和 display:inline-block
add #content style - z-index that smaller than footers z-index
add #content style - float:left and display:inline-block