粘性页脚隐藏内容

Question

我用CSS做了下面的粘性页脚。底部页面的内容目前隐藏在页脚后面(见附件截图)。如何调整CSS以使所有正文内容都可见，并且页脚仍然停留在浏览器窗口的底部？谢谢!

​

​

CSS：

.fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}

Answer 1

我以前在互联网上看到过这个答案。效果很好：

HTML

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

CSS

    html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}

Answer 2

你可以创建一个清晰的div并给它一个高度。

.clear { clear: both; height: 60px; }

<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>

高度是使内容保持在页脚上方所需的高度，例如。比脚注还高。如果页脚是50px；height，我在透明div中的高度为60px；。因此，当我滚动时，页脚停留在原地，但当我到达底部时，从页脚后面流出的内容有空间被推到页脚上方而不被覆盖。非常简单，而且它工作得很完美。

Answer 3

当我想出自己的解决方案时，我也遇到了这个问题。我将我的页脚设置为10%：

footer{
  position: fixed;
  **height:10%;**
  width:100%;
  padding-top: 2px;
  bottom: 0;
  clear: both;
  background-color: black;
  color: white;
  float: left;
  overflow: auto;
}

我的内容是拥有一个11%的bottom margin：

#content{
  width: 800px;
  margin: auto;
  background-color: rgba(0,0,0,.7);
  color: #99FFCC;
  height: 80%;
  padding:30px;
  **margin-bottom: 11%;**
}

我希望这能帮助任何有同样问题的人！