gpt4 book ai didi

html - 如何阻止 Sticky Footer 覆盖内容...?

转载 作者:技术小花猫 更新时间:2023-10-29 12:30:06 25 4
gpt4 key购买 nike

我使用的是“粘性”页脚,但在几个页面上它覆盖了内容。有什么方法可以防止这种情况发生,同时保持其“粘性”质量?

我尝试在 HTMLbody 上使用 min-height:,但没有用。

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>

最佳答案

正如阿米特所说,你应该放一个 margin-bottom为你的 body并使用 min-height而不是 height :

body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
}

并且您应该从 <body> 中删除 height:100%

希望这对您有所帮助!

关于html - 如何阻止 Sticky Footer 覆盖内容...?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16244821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com