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

我试图建立一个粘性页脚。我看着ryanfaits的版本，并在这一个http://matthiasschuetz.com/content/extras/css_template01.html CSS粘滞页脚 - 当内容div包含大量文本时没有滚动条

最后一个工作得很好，但问题是，当我把大量的内容放入content-div，页脚下降，没有滚动条在内容div。我试着在content-div中设置min-height，max-height，height，当然overflow = auto和overflow-y。最后一个显示至少一个禁用的滚动条，但仍然无法正常工作。

任何想法？林很失望:(

非常感谢！罗恩

来源

2011-08-27 Ron

你能告诉我们你的代码吗？ – xec

我刚刚使用这两个网站的代码。 – Ron

看到他们的代码有效，但是当你试图实现它时，我不禁感到你的实现和你引用的来源之间必然存在不一致，这就是为什么我会喜欢看你尝试过的东西至今。也许你只是缺少内容容器的底部边距？ – xec

看一看

http://www.cssstickyfooter.com/

如果我使用http://matthiasschuetz.com/content/extras/css_template01.html和扩大它不显示我的DIV滚动条的内容。也许你应该在网上发布你的HTML/CSS，让人们可以看看，如果这不帮助你。

来源

2011-08-27 11:42:50

这一个不适合主要（或内容）-div中较长的文本.... – Ron

首先将此添加到您的CSS

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

所有第二我没有尝试你的粘页脚，但我经常用这一个 http://ryanfait.com/sticky-footer/

这工作得很好。

来源

2011-08-27 11:44:24 Johansrk

这很好，但我有两个滚动条。一个用于整个页面，另一个用于content-div。我只需要一个内容div。当滚动浏览内容时，我想让剩下的东西留在原来的位置。顺便说一句：我也尝试了ryanfaiits，但是页脚“吃掉”了内容div的底部 - 我希望它结束在页脚的上方 - 或者与我的第一个解决方案相同。任何进一步的想法如何解决我的问题？ thx再次！ – Ron

Ron 我有同样的问题，所以是的，你的问题是有效的粘脚。您可以尝试将以下内容放置在内容从顶部开始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;

}

来源

2011-11-01 14:42:03

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

回答

相关问题