HTML – 如何阻止Sticky Footer覆盖内容……？

发布时间：2020-12-14 23:31:49 所属栏目：资源来源：网络整理

导读：我使用的是“粘性”页脚,但在几页上它覆盖了内容.有没有办法防止这种情况发生,但保留它的“粘性”质量？我尝试在HTML和body上使用min-height：但是这不起作用. CSS： html { background: black url(images/bg2.jpg) no-repeat 200px center fixed; -webkit-

我使用的是“粘性”页脚,但在几页上它覆盖了内容.有没有办法防止这种情况发生,但保留它的“粘性”质量？

我尝试在HTML和body上使用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.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所说,你应该为你的身体设置一个边缘底部并使用最小高度而不是高度：

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

你应该从< body>中删除高度：100％

希望这可以帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!