Html 如何阻止粘性页脚覆盖内容......？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16244821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stop Sticky Footer from covering content...?
提问by pianoman
I'm using a "sticky" footer, but on a couple of pages it overlays the content. Is there any way to prevent this from happening, but retaining it's "sticky" quality?
我正在使用“粘性”页脚，但在几个页面上它覆盖了内容。有什么办法可以防止这种情况发生，但要保持它的“粘性”质量？
I tried using min-height:on HTMLand body, but that didn't work.
我尝试使用min-height:onHTML和body，但这没有用。
CSS:
CSS：
html {
background: black url(images/bg2.jpg) no-repeat 200px center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
}
body {
margin: 0;
height: 100%;
padding-left: 40px;
padding-top: 25px;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
min-width: 900px;
overflow: hidden;
}
#body {
padding-bottom: 100px;
float: left;
background-color: rgba(0,0,0,0.7);
width: 750px;
height: 400px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 100px;
}
HTML:
HTML：
<body>
<div id="container">
<div id="header">
<div class="logo">C</div>
<ul class="main_nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="body">
<div id="bio_wrapper">
</div>
</div>
<div id="footer">
<span class="footer_text">Copyright ? 2013<br />All Rights Reserved.</span>
</div>
</div>
</body>
回答by LRA
As amit said, you should put a margin-bottomfor your bodyand use min-heightinstead of height:
正如阿米特所说，你应该margin-bottom为你的body和使用min-height而不是height：
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
And you should remove height:100%from <body>
你应该删除height:100%从<body>
Hope this helps!
希望这可以帮助！
回答by amit ghosh
If your body div closed before footer div start then use margin-bottom property. Example if the page structure is
如果您的正文 div 在页脚 div 开始之前关闭，则使用 margin-bottom 属性。如果页面结构是
<div id="body">
</div>
<div id="footer">
</div>
then write
然后写
#body{
margin-bottom: (height of your footer);
}
If your code structure is not like that. I mean your footer div is inside body div. Then use that margin bottom property to the div which close just before footer div start.
如果你的代码结构不是这样。我的意思是你的页脚 div 在 body div 内。然后将边距底部属性用于在页脚 div 开始之前关闭的 div。
回答by Craig
Have a look at this solution. You can use absolute positioning for all of your main content elements (header, article, footer). Use @media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.
看看这个解决方案。您可以对所有主要内容元素（页眉、文章、页脚）使用绝对定位。如果您需要针对不同的屏幕宽度（响应式设计）更改页眉或页脚高度，请使用 @media 查询以不同的分辨率创建中断，并告诉您的主要内容区域隐藏溢出。您也可以通过这种方式在主要内容区域内使用浮动的相对布局。
回答by negman
In the last div before the footer just add style="height:100%;padding-bottom:0;" to overwrite the general rules you have some conflict probably with.
在页脚之前的最后一个 div 中添加 style="height:100%;padding-bottom:0;" 覆盖您可能与之存在冲突的一般规则。
