Sticky footer problem

[afish674]

Hi, I'm trying to user a sticky footer on my page. At the moment, even with no content you have to scroll down to see the footer, rather than it being stuck to the bottom of the page. I'm a bit stumped as to why this is happening? Link to layout: http://dl.dropbox.com/u/13032629/MumMatters%28HTML5%29/index.html

[Don E]

Check out this link on giving you an idea on how to make a sticky footer: http://ryanfait.com/sticky-footer/

[afish674]

Thanks, but thats the one I'm following. I've used it before with no problems but this time its causing my page to need to scroll. I just can't work out what it is about my layout thats making it do that. :Sad:

Edited May 29, 2012 by afish674

[dsonesuk]

The min-height:100% element MUST be at the very top of page. I've never done it this way before but try this

#contentWrap {	margin: -143px auto -125px;	min-height: 100%;	width: 960px;} .footer {	margin-top: -125px;}

give the element with role="main" id ref

<div id="main" role="main"><p>Some content</p></div>

and use

#main {	padding: 130px 0;}

[divinedesigns1]

hey afish, this is what i do for the sticky footerfor the html and body i do this

html, body {height:100%;}

for the container/wrapper i do this

wrapper/container {min-height:100%;width:1024px;margin:0 auto;etc}

for the contain or the part where the next and so on goes or w.e is holding the content in place i do this

content {overflow:auto;padding-bottom:43px;width: 1024px;padding-right:10px;etc etc}

and for the footer which is placed outside of the wrapper i do this

footer {position:relative;margin:-43px auto 0px auto;clear:both;width:1024px;etc etc}

and by doing this the footer gets stuck to the bottom of the screen regardless of the resolution.also w.e the content padding at the bottom is the footer is negative to that number so since i have a padding to the bottom as 43px, the margin to the top of the footer is -43px hope that help. P.S: THE FOOTER HAVE TO BE OUTSIDE OF THE WRAPPER or it wouldnt work, i had this problem before lol later

[dsonesuk]

Just to make clear about the unit value for padding and margin is usually based on the height of the footer. The container is 100% height (total height of browser screen), by adding footer outside forces to below screen height, margin-top: - height of footer causes to come into view, but overlap container. If you where to add large amount of text, the bottom of this text would be hidden from view under footer, so you add the height of footer padding to content to allow for footer overlap. The problem you have is the header/clouds elements outside the container is forcing the min-height: 100% container down by the height of these elements, which also forces down the footer, and not given a true 100% display with sticky footer.

[divinedesigns1]

Just to make clear about the unit value for padding and margin is usually based on the height of the footer. The container is 100% height (total height of browser screen), by adding footer outside forces to below screen height, margin-top: - height of footer causes to come into view, but overlap container. If you where to add large amount of text, the bottom of this text would be hidden from view under footer, so you add the height of footer padding to content to allow for footer overlap. The problem you have is the header/clouds elements outside the container is forcing the min-height: 100% container down by the height of these elements, which also forces down the footer, and not given a true 100% display with sticky footer.

wouldnt changing the min-height according to the header/clouds elements that is outside the container help resolve this?hehehe sorry curiousity kicking in again

[dsonesuk]

only a single outer element with min-height:100% will give true 100% height, all the child element will shrink to height of content, you can't have header/cloud elements inside as they need extend the total width of browser window, but the container is restricted to width: 960px;

[divinedesigns1]

only a single outer element with min-height:100% will give true 100% height, all the child element will shrink to height of content, you can't have header/cloud elements inside as they need extend the total width of browser window, but the container is restricted to width: 960px;

then to solve this he needs to put a fix height of X amount of pixels, with a width of 100% correct?

[dsonesuk]

then to solve this he needs to put a fix height of X amount of pixels, with a width of 100% correct?

???? to what?

[divinedesigns1]

???? to what?

oh i was saying if he have the header outside the container, it might work if he just place a height of the header then make its width 100%, which prolly enable the min-height to work if im wrong then imma have to give it a try to see what kind of effect i get

[dsonesuk]

??? Thats is what he already has, its a block element you don't have to define the width, but the height of this header outside will force #contentWrap which is using min-height:100%; (current total height of browser window) down, which in turn force the footer down. Anything outside this element at the top, totalled will force #contentWrap down by that amount but the min-height remains the total height of browser window, it does not adjust to allow for any element height above or below it.

[divinedesigns1]

??? Thats is what he already has, its a block element you don't have to define the width, but the height of this header outside will force #contentWrap which is using min-height:100%; (current total height of browser window) down, which in turn force the footer down. Anything outside this element at the top, totalled will force #contentWrap down by that amount but the min-height remains the total height of browser window, it does not adjust to allow for any element height above or below it.

understood that, what i was saying was, instead of having the min-height at 100% why not change it. lets say the block element have a height of 40px.by taking away the 40px outta the 100% and placing the total of that into the min-height, which should adjust itself to the height of the browser. if that clear up what im trying to say

[dsonesuk]

The problem with that is, how would you take 40px from a percentage value in css?, where the value of 100% would change depending on different screen resolutions, different number of toolbars, different browser window sizes, if you have status bar or not, if you windows taskbar or not, watching full screen or not.

[afish674]

Thank you both for your suggestions. I went with dsoneuk's and it worked great! I just wondered how did you get to 130px padding for the #main div? Was it just an abitrary number that looked okay or was there some maths involved? I ask because since I posted this, I've changed the layout around a bit and I had to adjust your solution (because the header and footer changed size) I just played around with the #main div padding until it looked right rather than working it out. Thanks again guys, massively helpful!

[dsonesuk]

height of footer + 5