CSS 粘性页脚 - 当内容 div 包含大量文本时没有滚动条

Question

我正在尝试建立一个粘性页脚。我查看了 ryanfaits 的版本，在这个 http://matthiasschuetz.com/content/extras/css_template01 .html

最后一个工作正常，但问题是，当我在 content-div 中放入大量内容时，页脚会向下移动，并且顶部没有滚动条内容分区。我尝试在 content-div 中设置最小高度、最大高度、高度，当然还有溢出=自动和溢出-y。最后一个至少显示了一个禁用的滚动条，但仍然无法正常工作。

有什么想法吗？我很沮丧:(

非常感谢！ 罗恩

Answer 1

罗恩
我遇到了同样的问题，所以是的，您的问题对于粘性页脚来说是有效的。您可以尝试将以下内容放在内容容器上，内容从顶部开始 130 像素。

#content-container {
margin-top:130px;
position: absolute;
top: 0; 
bottom: 0; 
left: 0; 
right: 0;
overflow: auto;
}

实际上，我最终通过这样做使整个包装器 div 滚动：

#wrapper {
min-height:100%;
height: auto !important;
height: 100;
margin: 0 auto;
position: absolute;
top: 0; 
bottom: 0; 
left: 0; 
right: 0;
overflow: auto;

}

#footer-container {
background-color:#263959;
color:#FFF;
height:110px;
min-width:1000px;
width:100%;
overflow:hidden;
position:absolute;
bottom:0;

}

Answer 2

看看

http://www.cssstickyfooter.com/

如果我使用 http://matthiasschuetz.com/content/extras/css_template01.html 并展开未显示的内容我的div的滚动条。也许你应该把你的 html/css 发布到网上，这样如果这对你没有帮助的话，人们可以看一下。

Answer 3

首先将其添加到您的 CSS

html {
    height: auto;
    min-height: 100%;
    overflow-y: scroll;
}

其次，我没有尝试您的粘性页脚，但我经常使用这个
http://ryanfait.com/sticky-footer/

这非常有效。