Results 1 to 4 of 4
May 22, 2009, 13:18 #1
Can stop footer from scrolling when content set to 100%
I am trying to make it so that the contentwrapper will adjust according to the content that is inside it while at the same time make the footer stay below. So far I have been able to position the footer using abolute lenghths, but that creates a page that can be to big if there is little content. How do I make contentwrapper and footer work in harmony on this page
Last edited by capnhud; May 22, 2009 at 19:47.I know I am in my own little world. But its OK "They Know Me HERE"
May 22, 2009, 17:55 #2
- Join Date
- Oct 2008
- Whiteford, Maryland, United States
- 16 Post(s)
- 0 Thread(s)
Page not found. Do you mean like a sticky footer? Pmob.co.uk has a great list of layouts which may meet your needs .Always looking for web design/development work.
May 22, 2009, 19:49 #3
It seems that each one that I try so far just seems to make things worse. As far a a ok page I was fine until I started thinking about what if the content was less that what is there now and the moment I changed content to anything other than 100% ie 850px all hell broke loose. In opera I see one in firefox I see another and I just became frustrating.I know I am in my own little world. But its OK "They Know Me HERE"
May 23, 2009, 05:17 #4
- Join Date
- Aug 2007
- 51 Post(s)
- 2 Thread(s)
You definitely want to check out the sticky footer. What it does is use a footer who is OUTSIDE the container of the rest of the page. This container is also set to min-height: 100% (height: 100% for IE6) so that it's always at least 100% tall but can grow if content grows. You just can't get that in a pure 100% high page unless you set overflow to auto for extra scrollbars (on that element, container, not the page like normal).
The footer would always bee offscreen then, since the container above it is always at least 100% tall. So you pull it up over container's bottom with a negative top margin. Since this means content inside container might get covered over, some inner element of container needs to have bottom padding at least as much as the footer is tall. (you can't add the padding to the container because you can't add to 100%)
Also make the footer position: relative for stability of links and other clicky things inside, and you're good to go.
Do look at Paul's examples, though. I've seen other with this stupid "push" div inside and that's just nasty, stinks as bad as a clearing div. You don't need it.