HTML/CSS Footer troubles

问题

I've looked on previous SO posts and tuts but have not had any luck with my own code. My footer will not stick to the bottom of the page (not the window). I don't want content to scroll through my footer. The page sizes vary greatly in length and want to have a footer at the bottom at all times.

The leftcol, rightcol, and footer are all in the container. Any help would be awesome.

My HTML is structured as so:

<body>
 <div id = "container">
  <div id = "leftcol">
      <h2></h2>
       </p>
  </div>
  <div id = "rightcol">
      <h2></h2>
      </p>
   </div>
   <div id ="footer">
       <p>...........</p>
   </div>
 </div>
</body>

Here is my CSS:

body {
    font-family: 'Rokkitt', Georgia, serif;
    font-size: 16px;
    background-color: #FFFFFF;
    line-height: 1.3em;
    height: auto;
    color: #252525;
    }

#container {
    display: block;
    width: 1024px;
    min-height: 100%;
    margin-left: auto;
    margin-right: auto;
    }

#leftcol {
    display: block;
    float: left;
    margin: 20px 5px 5px 15px;
    width: 660px;
    position: absolute;
    height: auto;
    padding-bottom: 20px;
    }

#rightcol {
    display: block;
    float: right;
    margin: 30px 5px 5px 780px;
    position: absolute;
    width: 275px;
    height: auto;
    }

#footer {
    position: fixed;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }

回答1:

you need to move your footer outside of the container element and the body element and use position:absolute; and bottom:0; to always fix it to the bottom of the html element.

I say outside of the body as, although majoritively the body tag takes o the height of the html element, there are some versions of IE in which this isn't the case. As you haven't pasted your HTML i obviously can't show you the revised html but you're css should look like:

#footer {
    position: absolute;
    bottom: 0;
    width: 1024px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
    }

回答2:

did you look at?

http://www.cssstickyfooter.com/

this worked for me

回答3:

This is the BEST solution out there

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

回答4:

Check this fiddle: http://jsfiddle.net/9Wy8G/13/

Is this what you want?

UPDATE:
Check this SO post. You may find it useful.

来源：https://stackoverflow.com/questions/12896052/html-css-footer-troubles

标签

html

css

footer