Jump to content

Sticky footer problem


afish674
 Share

Recommended Posts

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 by afish674
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)
Link to comment
Share on other sites

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;

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

???? 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
Link to comment
Share on other sites

??? 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.

Link to comment
Share on other sites

??? 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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...