如何阻止粘性页脚覆盖内容...? [英] How to stop Sticky Footer from covering content...?
本文介绍了如何阻止粘性页脚覆盖内容...?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是粘性页脚,但在几页上它覆盖了内容。有什么方法可以防止这种情况的发生,但要保持其粘性质量?
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?
我尝试使用 min-height:
HTML 和 body
上的$ c>,但这无效。
I tried using min-height:
on HTML
and body
, but that didn't work.
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:
<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>
推荐答案
正如amit所说,您应该放置距底部
为您的身体
,并使用最小高度
代替高度
:
As amit said, you should put a margin-bottom
for your body
and use min-height
instead of height
:
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
}
您应该从其中删除 height:100% < body>
希望这会有所帮助!
这篇关于如何阻止粘性页脚覆盖内容...?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文