Sticky footer under floated content

问题

I have a page where the content is floated in the center so that in any browser size, the content div will always be smack bang in the middle.

Now, I've gone ahead and added a sticky footer to the page, however when the browser window is smaller than expected, the footer displays in front of the floated content.

I am not exactly up to speed with how clearing floats works or exactly how absolute positioning affects relative positioning. I am aware that once I make the footer absolute, it becomes independent of all the other divs, which is naturally not what I want, but this is where I am getting stuck.

My question is, how can I make the sticky footer display at the bottom of the page, but stay under (by under I mean below) the floated content if the height of the browser screen is smaller.

Here is an example of my current code: http://jsfiddle.net/ySru9/1/

I have taken the sticky footer code from here: http://www.cssstickyfooter.com/style.css and here http://ryanfait.com/sticky-footer/layout.css

I’m sorry if this is a repeat of another question on SO, but I have trawled through and couldn’t exactly find anything the same. I assume that there is some yucky jquery stuff that I need to delve into?

回答1:

If you make the footer positioned absolute in your body, but make sure the body has some minimal height greater than your yellow container, this could work:

http://jsfiddle.net/willemvb/PZHvH/

回答2:

try using:

#container 
{
  margin: 0 0 0 -100px;
  position: relative;    
}

Check this fiddle: http://jsfiddle.net/ySru9/39/

来源：https://stackoverflow.com/questions/12893031/sticky-footer-under-floated-content

标签

css

footer

sticky-footer