html - 将页脚固定到页面底部

Question

虽然我网站上的大多数页面都有足够的内容，可以将页脚推到大多数人的页面底部。我想知道从现在开始无论屏幕大小如何它总是固定在底部。

我尝试了很多方法，比如 bottom: 0x; position:absolute:等等。似乎从来没有很好地工作，偶尔会使用其中的一些示例将页脚推出其容器以固定到底部。

包括页脚两部分(页脚和版权栏)的 HTML 和 CSS。它们都在 <section id="footer"> 中div无论如何。

我取消了让它坚持下去的尝试，以便人们现在可以查看它并查看当前代码要修改的内容。

实时网址 - http://www.mangdevelopment.co.uk/nakedradish

(这是一个餐厅网站。不要担心'裸'这个词)。

HTML

<section id="footer">
  <div class="container">
    <div class="row">
      <div class="span1">
        <div id="small-logo">
          <img src="img/small-logo.png" />
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR BOXES</h6>
          <ul>
            <a href="#">
              <li>Classic Box</li>
            </a>
            <a href="#">
              <li>Vegetarian Box</li>
            </a>
            <a href="#">
              <li>Family Box</li>
            </a>
            <a href="#">
              <li>Dinner Party Box</li>
            </a>
            <a href="#">
              <li>Gift Box</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>OUR RECIPES</h6>
          <ul>
            <a href="#">
              <li>Last Weeks Feature</li>
            </a>
            <a href="#">
              <li>Next Weeks Feature</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span2">
        <div class="footer-list">
          <h6>ABOUT US</h6>
          <ul>
            <a href="#">
              <li>The Food</li>
            </a>
            <a href="#">
              <li>How We Sourcex</li>
            </a>
            <a href="#">
              <li>Sustainability</li>
            </a>
            <li><a href="about.html">About Us</a></li>
            <a href="#">
              <li>Contact Us</li>
            </a>
          </ul>
        </div>
      </div>
      <div class="span5">
        <div id="twitter">
          <img src="img/twitter-logo.png" alt="" title="" height="50" width="50" class="twitter-logo" />
          <div class="tweet-bg">
            <div class="tweets">
              <p>@chefallanp that's just not on really</p>
            </div>
            <div id="follow-btn">
              <img src="img/follow-us.jpg" />
            </div>
          </div>
        </div>
        <div class="checkout-options">
          <h6>SECURE CHECKOUT</h6>
          <ul>
            <li><img src="img/solo-logo.png" /></li>
            <li><img src="img/switch-logo.png" /></li>
            <li><img src="img/maestro-logo.png" /></li>
            <li><img src="img/visa-logo.png" /></li>
            <a href="#">
              <li><img src="img/facebook-logo.png" /></li>
            </a>
            <a href="#">
              <li><img src="img/twitter-logo-flat.png" /></li>
            </a>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="copyright-bar">
  <div class="container">
    <div class="row">
      <div class="copyright-content">
        <div class="span4">
          <p>The Naked Radish Limited. 2013 All rights reserved.</p>
        </div>
        <div class="span4 offset4">
          <div class="copyright-list">
            <ul>
              <a href="terms.html">
                <li>Terms &amp; Conditions</li>
              </a>
              <a href="privacy.html">
                <li> - Privacy Policy</li>
              </a>
              <a href="#">
                <li> - Cookie Policy</li>
              </a>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS:

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
}

Answer 1

对于您的页脚:

#footer {
    position: fixed;
    height: 50px;
    background-color: red;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
}

对于你的正文:

body {
    margin-bottom:50px;
}

#footer {
  background-color: red;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  margin-bottom: 0px;
}

div {
  margin: 20px 20px;
}

body {
  margin-bottom: 50px;
}

<div>
  Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom:
  0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright
  bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the
  bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally
  pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts
  at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always
  fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using
  some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and
  see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway.
  I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for
  the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site
  have enough content to push the footer to the bottom of the page for most people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc.
  Never seems to work very well, occasionally pushes the footer out of it's container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside
  of a div anyway. I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend. Although most pages on my site have enough content to push the footer to the bottom of the page for most
  people. I would like to know it's always fixed to the bottom regardless of screen size from now on anyway. I've tried a number of ways such as bottom: 0x; position:absolute: etc. Never seems to work very well, occasionally pushes the footer out of it's
  container to fix to the bottom using some of those examples right there. Included is the HTML and CSS for the two parts of the footer (footer & copyright bar). They're both inside of a div anyway. I removed my attempts at getting it to stick so people
  can have a look at it right now and see what the current code is to amend.
</div>
<div id="footer">
  This is footer
</div>

jsFiddle Demo