开发者

CSS Sticky Footer - No Scrollbar when content div contains lots of text

Im trying to build a sticky footer. I looked at ryanfaits' version and at this one http://matthiasschuetz.com/content/extras/css_template01.html

The last one works just fine but the problem is, that when I put in a lot of content into the content-开发者_开发知识库div, the footer goes down and there is no scrollbar at the content-div. I tried at the content-div to set min-height, max-height, height and of course overflow=auto and overflow-y. Last one shows at least a disabled scrollbar but is still not working.

Any ideas? Im quite frustrated :(

Thanks alot! Ron


Ron I had the same issue, so yes, your issues is valid with the sticky footer. You can try putting the following on the content container where your content starts 130px from the top.

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

I actually ended up making the whole wrapper div scroll by doing this:

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

}


Have a look at

http://www.cssstickyfooter.com/

If I use http://matthiasschuetz.com/content/extras/css_template01.html and expand the content it does not show me a scrollbar for the div. Maybe you should post your html/css online so people can take a look if this doesnt help you.


First of all add this to your CSS

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

Second of all I didn't try your sticky footer, but I often use this one http://ryanfait.com/sticky-footer/

This works very well.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜