CSS Sticky Footer - 当内容 div 包含大量文本时没有滚动条答案

【问题标题】：CSS Sticky Footer - No Scrollbar when content div contains lots of textCSS Sticky Footer - 当内容 div 包含大量文本时没有滚动条
【发布时间】：2011-11-05 01:35:30
【问题描述】：

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

最后一个工作正常，但问题是，当我将大量内容放入 content-div 时，页脚会下降，并且 content-div 处没有滚动条。我尝试在 content-div 上设置 min-height、max-height、height，当然还有 overflow=auto 和 overflow-y。最后一个显示至少一个禁用的滚动条，但仍然无法正常工作。

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

非常感谢！罗恩

【问题讨论】：

你能告诉我们你的代码吗？
我刚刚使用了这两个网站的代码。
看到他们的代码有效，但当您尝试实现它时，我不禁觉得您的实现与您引用的来源之间一定存在不一致，这就是我喜欢的原因看看你到目前为止尝试了什么。也许您只是缺少内容容器的底部边距？
问题是它没有实现！这些示例不包含带有滚动条的 content-oder main-div。它只是将页脚向下推（不再粘滞）或主 div 的其余部分隐藏在页脚后面...感谢您的努力！
啊，那你想要一个固定的页脚吗？尝试位置：绝对，底部：0 然后。它将使页脚始终位于底部（除了 ipad、iphone、android 手机和平板电脑和其他移动设备）

标签： css scrollbar overflow footer sticky

【解决方案1】：

罗恩我有同样的问题，所以是的，你的问题对粘性页脚有效。您可以尝试将以下内容放在您的内容从顶部开始 130px 的内容容器中。

#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;

}

【讨论】：

【解决方案2】：

看看

http://www.cssstickyfooter.com/

如果我使用 http://matthiasschuetz.com/content/extras/css_template01.html 并展开内容，它不会显示 div 的滚动条。也许您应该在线发布您的 html/css，以便人们可以看看如果这对您没有帮助。

【讨论】：

【解决方案3】：

首先将它添加到你的 CSS 中

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

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

这很好用。

【讨论】：

这很好，但是我有两个滚动条。一个用于整个页面，一个较小的用于 content-div。我只需要一个内容 div。在滚动浏览内容时，我希望其余部分保持原样。顺便说一句：我也尝试过 ryanfaiits，但是页脚“吃掉”了内容 div 的底部——我希望它在页脚的正上方结束——或者发生与我的第一个解决方案相同的事情。任何进一步的想法如何解决我的问题？再次感谢！