粘滞页脚隐藏内容 [英] Sticky footer hiding content

问题描述

我为粘性页脚做了下面的CSS，但我面临的问题是，当内容溢出与滚动，然后一些内容隐藏在页脚后面（见附件截图）。请告诉我如何解决这个问题，所以粘性页脚应该坚持到底部填充一些比例的填充顶部或类似的内容不应该隐藏。

I made the following CSS for sticky footer but the problem I am facing is that when the content overflows with scroll then some of the content hides behind the footer (see the attached screenshot). Kindly let me know how I can fix this issue so the sticky footer should stick to bottom wrt to some certain ratio of padding top or the like and content should not hide.

CSS：

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

推荐答案

在互联网上过去。非常棒：

I came across this answer out on the internet in the past. Works great:

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

这篇关于粘滞页脚隐藏内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！