21

我正在使用“粘性”页脚，但在几个页面上它覆盖了内容。有什么办法可以防止这种情况发生，但要保持它的“粘性”质量？

我尝试使用min-height:on HTMLand body，但没有奏效。

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>
4

5 回答 5

37

正如阿米特所说，你应该把 a margin-bottomfor your bodyand usemin-height代替height：

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

你应该删除height:100% from<body>

希望这可以帮助！

于 2013-04-26T21:25:56.673 回答
9

如果您的 body div 在页脚 div 开始之前关闭，则使用 margin-bottom 属性。例如，如果页面结构是

<div id="body">
</div>
<div id="footer">
</div>

然后写

#body{
   margin-bottom: (height of your footer);
}

如果您的代码结构不是那样。我的意思是你的页脚 div 在 body div 里面。然后将该边距底部属性用于在页脚 div 开始之前关闭的 div。

于 2013-04-26T20:51:23.563 回答
2

看看这个解决方案。您可以对所有主要内容元素（页眉、文章、页脚）使用绝对定位。如果您需要针对不同的屏幕宽度（响应式设计）更改页眉或页脚高度，请使用 @media 查询以不同的分辨率创建中断，并告诉您的主要内容区域隐藏溢出。您也可以通过这种方式在主要内容区域内使用浮动的相对布局。

于 2013-12-01T21:43:47.160 回答
0

这个解决方案对我有用。

按照该链接获取更多解释和一些视觉效果，但基本上，这个想法归结为在主要内容的底部添加填充，至少是页脚的高度。

HTML：

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

CSS：

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
于 2021-08-17T00:17:13.863 回答
0

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.

于 2018-03-01T21:59:27.320 回答