html - 粘性页脚(不固定)隐藏主要内容

Question

也许我做错了(像往常一样叹息)但问题是，一旦内容一直向下，我就会在页脚后面看到主要内容。虽然它通过在内容开始填满后向下插入页脚来完成我想要它做的事情......但是它有一定数量的信息总是隐藏在页脚后面。是因为 float /位置吗？

从这个codepen URL可以看出: http://codepen.io/anon/pen/ygGZNR

height: 200px;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
border-top: 1px solid red;

页脚从红线所在的位置开始，您会发现问题所在。

请求:我希望页脚现在具有相同的效果，在主窗口中保持固定，没有/只有很少的内容，但一旦内容接近它就会被推下，谢谢男孩女孩们!

Answer 1

如下更新你的CSS

将 position: absolute; 改为 position:relative;

#footer{
    /*background-image: url("../img/Me_footer.jpg");*/
    height: 200px;
    /*background-color: red;*/
    position:relative;
    width: 100%;
    border-top: 1px solid red;
}