粘性页脚隐藏内容

Question

我为粘性页脚制作了​​以下CSS,但我遇到的问题是当内容溢出滚动时,一些内容隐藏在页脚后面(参见附页截图).请告诉我如何解决这个问题,以便粘性页脚应该粘贴到底部或某些比例的填充顶部等,内容不应该隐藏.

CSS:

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

Answer 1

对不起,如果这个太旧了,但我想出了一个对我来说非常好的解决方案!我创造了一个明确的div并给它一个高度.

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

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

高度是您将内容保持在页脚上方所需的任何内容,例如.比页脚高.如果页脚是50px; 高,我做60px; 对于透明div中的高度.因此,当我滚动时,页脚会保持在原位,但是当我到达底部时,从页脚后面流出的内容有足够的空间被推到页脚上方而不被遮盖.超级简单,它完美地工作.也许有人可以纠正我,如果有什么问题,比如某种冲突.对不起,这是一个较旧的帖子,但我觉得我可以添加到这个,因为我自己发现这篇文章寻找解决方案.

Answer 2

我过去在互联网上看到了这个答案.效果很好:

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%;
}