How to Stop Sticky Footer at Content DIV

问题

I've been tweaking my sticky footer in hopes of stopping it once it hits the #body div, but so far, I've been unsuccessful. In most cases, it doesn't usually cover the content, but on this page, it often does.

I would like to keep it stuck to the bottom of the window, if possible, but the only other solution I've been able to come up with is a fixed position. Any suggestions?

回答1:

Well, you can apply a fixed position/sticky footer in a number of ways. One option is using only CSS, as Twitter Bootstraps Sticky Footer example. That is probably the simplest implementation.

  /* The html and body elements cannot have any padding or margin. */
  html,body { height: 100%; }

  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* Negative indent footer by it's height */
  }

  /* Set the fixed height of the footer here */
  #push,#footer{ height:100px }
  #footer {}

回答2:

I am not sure about your desired result, but may be what you need is just like:

#footer {
  position: fixed;
  bottom: 0;
  left:0;
  right:0;
}

回答3:

According to Ryan Fait you can use the following CSS in the document layout.css:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em; /*-4em represents the height of the footer */
 }
 .footer, .push {
    height: 4em;
 }

As well as the following HTML markup, which is actually quite simple to implement and it works in all major browsers.

<html>
<head>
    <link rel="stylesheet" href="layout.css" ... />
</head>
<body>
    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Website Footer Here.</p>
    </div>
</body>
</html>

I've implemented it before and it works flawlessly for having a footer either stick to the bottom of the page, or at the bottom of your content, and it requires no jquery or javascript at all.

To respond to kurzweilguy's comment, the push makes it so that you can have the footer at 100% height, this would naturally extend the page to have a scroll bar, so to counter it you put a negative margin on it to bring it back up to make it fit on the bottom of the page. The footer that darcher references uses the same exact footer. It's a very nicely compiled footer!

来源：https://stackoverflow.com/questions/16259636/how-to-stop-sticky-footer-at-content-div

标签

css

html5

css3

footer

sticky-footer