CODEWITHSUNDEEP
cssscrollbaroverflowfootersticky
Ron
Ron

Reputation: 1

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

Upvotes: 0

Views: 5009

Answers (3)

Jason Bailey
Jason Bailey

Reputation: 21

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;

}

Upvotes: 2

Johansrk
Johansrk

Reputation: 5250

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.

Upvotes: 0

Ben
Ben

Reputation: 13615

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.

Upvotes: 1

Related Questions