My sticky footer doesn't work

问题

I know that this question has been asked many many times, but I haven't found a solution that actually works for me.

My html...

<body>
      <div id="container">
      </div>
      <div id="footer">
      </div>
</body>

My css....

body, html { min-height:100%;}

#container
  width: 980px;
  min-height: 100%;
  margin: 0 auto;}

footer {
  background-color: rgb(90,200,219);
  height: 50px;
  position: realative;
  margin-top: -50px;
  width: 100%; }

What is happening, is that the footer is totally sticking to the bottom of the page. But, when content is short, I still have to scroll down to find the footer which is sticking to the bottom. Can someone tell me what is wrong in my code?

回答1:

Try these methods I put together in a gist. https://gist.github.com/derek-duncan-snippets/4228927

body, html { /*body and html have to be 100% to push header down */
    height:100%;
    width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id.  Position relative IMPORTANT */
    position: relative;
    height: auto;
    min-height: 100%;
}
#header {
    height: 100px;
    background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
    padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
    height: 100px;
    width: 100%;
    background: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 0;
}

回答2:

I think you should fix up your CSS snippet as it has quite a number of things wrong with it. Use copy & paste to put it up here next time so your typo's don't throw anyone off.

body, html { min-height:100%; }

That should be height:100%;, but I think it might be a typo as you are saying that the footer sticks to the bottom, which it wouldn't if that line was really in your actual CSS.

#container is missing a bracket and should be #container {.

If those issues are fixed, in addition to the issues @Owlvark has pointed out. It seems to work fine here at jsFiddle. The only improvement I could think of was adding margin: 0px; to body, html, which might have been your issue as it gets rid of some extra space which would render a vertical scroll bar. But your issue seems more serious than that when you say you have to "scroll down to find the footer".

来源：https://stackoverflow.com/questions/16093530/my-sticky-footer-doesnt-work

标签

html

css

sticky-footer