将页脚固定到页面底部

Question

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

我尝试了很多方法，比如底部：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：

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

对于body：

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

Answer 2

我们可以使用 FlexBox 来粘贴页脚和页眉，而无需在CSS中使用POSITIONS。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 50px;
  flex-shrink: 0;
  background-color: #037cf5;
}

footer {
  height: 50px;
  flex-shrink: 0;
  background-color: #134c7d;
}

main {
  flex: 1 0 auto;
}

<div class="container">
  <header>HEADER</header>
  <main class="content">

  </main>
  <footer>FOOTER</footer>
</div>

DEMO - JSFiddle

注意：检查浏览器对FlexBox的支持。 caniuse

Answer 3

像这样在选择器position:fixed;下添加bottom:0;和#footer：

<强> demo

<强> CSS

#footer {
    background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;
    position:fixed;
    bottom:0;
    width:100%;
}

Answer 4

设置

html, body {
    height: 100%;
}

将整个内容包装在div中的页脚之前。

.wrapper {
    height:auto !important;
    min-height:100%;
}

您可以根据要在浏览器窗口底部显示的页脚数量，根据需要调整最小高度。如果将其设置为90％，则在滚动之前将显示10％的页脚。

Answer 5

这是一个简单的CSS解决方案，可以工作：

#fix-footer{
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 35px;
    width: 100%;
    background: #1abc9c;
}

Answer 6

CSS

html {
    height:100%;
}
body {
    min-height:100%; position:relative;
}
.footer {
    background-color: rgb(200,200,200);
    height: 115px;
    position:absolute; bottom:0px;
}
.footer-ghost { height:115px; }

HTML

<div class="header">...</div>
<div class="content">...</div>
<div class="footer"></div>
<div class="footer-ghost"></div>

Answer 7

重复（或N-plicated为正确）问题，但请阅读此http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Answer 8

我发现粘性页脚解决方案在响应式网站上有点痛苦，因为导航和页脚的高度可能因设备而异。如果你只关心在现代浏览器上工作，你可以使用一些Javascript来实现你的目标。

如果这是您的HTML：

<div class="nav">
</div>
<div class="wrapper">
</div>
<div class="footer">
</div>

然后在每个页面上使用此JQuery：

$(function(){

  /* Sets the minimum height of the wrapper div to ensure the footer reaches the bottom */
  function setWrapperMinHeight() {
    $('.wrapper').css('minHeight', window.innerHeight - $('.nav').height() - $('.footer').height());
  }
  /* Make sure the main div gets resized on ready */
  setWrapperMinHeight();

  /* Make sure the wrapper div gets resized whenever the screen gets resized */
  window.onresize = function() {
    setWrapperMinHeight();
  }
});

Answer 9

您的页脚元素不会固有地固定在视口的底部，除非您按照这种方式设置样式。
因此，如果您碰巧有一个页面没有足够的内容可以一直推动它它将最终到达视口中间的某个地方;看起来很尴尬，不知道该如何处理自己，就像我高中的第一天一样。

通过声明fixed规则来定位元素非常有用，如果你总是希望你的页脚可见而不管初始页面高度 - 但是记得设置一个底部边距，这样它就不会覆盖最后一点内容在那个页面上。如果您的页脚具有动态高度，这会变得棘手;这通常是响应式网站的情况，因为它具有堆叠元素的性质。

您会发现absolute定位存在类似问题。虽然它确实从文档的自然流程中取出了所讨论的元素，但如果你发现自己的页面几乎没有任何内容可以将其强化，它仍然无法将其固定在屏幕的底部。 / p>

考虑通过以下方式实现这一目标：

1. 声明<body>＆amp;的高度值<html>代码
2. 向嵌套的包装器元素声明minimum-height值，通常是包含在主体结构中的所有后代元素的元素（这不包括您的footer元素）

Code Pen Example

$("#addBodyContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".flex-col:first-of-type");
});

$("#resetBodyContent").on("click", function() {
  $(".flex-col p").remove();
});

$("#addFooterContent").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo("footer");
});

$("#resetFooterContent").on("click", function() {
  $("footer p").remove();
});

html, body {
    height: 91%;
}

.wrapper {
    width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 10px;
    display: block;
    min-height: 100%;
}

footer {
    background: black;
    text-align: center;
    color: white;
    box-sizing: border-box;
    padding: 10px;
}

.flex {
    display: flex;
    height: 100%;
}

.flex-col {
    flex: 1 1;
    background: #ccc;
    margin: 0px 10px;
    box-sizing: border-box;
    padding: 20px;
}

.flex-btn-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.btn {
    box-sizing: border-box;
    padding: 10px;
    transition: .7s;
    margin: 10px 10px;
    min-width: 200px;
}

.btn:hover {
    background: transparent;
    cursor: pointer;
}

.dark {
    background: black;
    color: white;
    border: 3px solid black;
}

.light {
    background: white;
    border: 3px solid white;
}

.light:hover {
    color: white;
}

.dark:hover {
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="flex-btn-wrapper">
        <button id="addBodyContent" class="dark btn">Add Content</button>
        <button id="resetBodyContent" class="dark btn">Reset Content</button>
    </div>
    <div class="flex">
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    <div class="flex-col">
      lorem ipsum dolor...
    </div>
    </div>
    </div>
<footer>
    <div class="flex-btn-wrapper">
        <button id="addFooterContent" class="light btn">Add Content</button>
        <button id="resetFooterContent" class="light btn">Reset Content</button>
    </div>
    lorem ipsum dolor...
</footer>

Answer 10

页脚位于页面底部，但不是固定。

<强> CSS

html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100%;  
  padding: 0;
}
#header {
  background: #595959;
  height: 90px;
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
  background-color: #595959;
}

<强> HTML

<html>
   <head></head>
   <body>        
      <div id="header"></div>
      <div id="content"></div>
      <div id="footer"></div>     
   </body>
</html>  

Answer 11

一个非常简单的示例，演示如何在应用程序的布局中修复底部的页脚。

＆＃13;

＆＃13;

/* Styles go here */
html{ height: 100%;}
body{ min-height: 100%; background: #fff;}
.page-layout{ border: none; width: 100%; height: 100vh; }
.page-layout td{ vertical-align: top; }
.page-layout .header{ background: #aaa; }
.page-layout .main-content{ height: 100%; background: #f1f1f1; text-align: center; padding-top: 50px; }
.page-layout .main-content .container{ text-align: center; padding-top: 50px; }
.page-layout .footer{ background: #333; color: #fff; } 

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <table class="page-layout">
      <tr>
        <td class="header">
          <div>
            This is the site header.
          </div>
        </td>
      </tr>
      <tr>
        <td class="main-content">
          <div>
            <h1>Fix footer always to the bottom</h1>
            <div>
              This is how you can simply fix the footer to the bottom.
            </div>
            <div>
              The footer will always stick to the bottom until the main-content doesn't grow till footer.
            </div>
            <div>
              Even if the content grows, the footer will start to move down naturally as like the normal behavior of page.
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td class="footer">
          <div>
            This is the site footer.
          </div>
        </td>
      </tr>
    </table>
  </body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 12

使用Flex和Bootstrap4（如果不使用Bootstrap4，则可以使用flex属性获得相同的结果）

<body class="d-flex flex-column">
    <div>Header</div>
    <div>Main container</div>
    <div class="mt-auto">Footer</div>
</body>

Answer 13

您可以使用网格布局。它比Flexbox更新，并且在浏览器中不受支持。

签出：

HTML

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

CSS

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}   

.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

有用链接：

浏览器Supoort：Can I Use - Grid Layout

完整指南：Grid Laoyut Guid

Answer 14

我的解决方案：

html, body {
  min-height: 100%
}

body {
  padding-bottom: 88px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 88px;
}

Answer 15

此代码对我有用：

footer{
    background-color: #333;
    color: #EEE;
    padding: 20px;
    left: 0;
    width: 100%;
    bottom: 0;
    position: fixed;
}

重要的是您应该添加bottom:0;和position: fixed;

Answer 16

这是一个不使用位置的解决方案，并且在每个浏览器上都运行良好：Keeping the footer at the bottom