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.
精彩评论