将页脚固定到页面底部

Posted 2023-03-21

【中文标题】将页脚固定到页面底部

【英文标题】：Fix footer to bottom of page

【发布时间】：2013-09-25 18:28:33

【问题描述】：

虽然我网站上的大多数页面都有足够的内容来将页脚推到页面底部，但对于大多数人来说。我想知道从现在开始不管屏幕大小，它总是固定在底部。

我尝试了多种方法，例如底部：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"  title=""   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;

【问题讨论】：

这个问题被问了一百万次。见***.com/questions/13788357/css-for-fixed-footer

您可以使用粘性页脚方法。谷歌它，你会找到代码。我使用 Compass Sticky Footer。这是example。

这个话题在 *** 上已经是 discussed several times。

CSS footer fixed position based on minimum height的可能重复

@SharavnanKv 该域已死

【参考方案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

【讨论】：

也只是给出了这个答案。谢谢，但并不意味着它与用户一起浮动。不在内容之上。

无论您的内容高度如何，它都会粘在页脚上。您的内容不会被隐藏，因为我已将 margin-bottom 设置为 body..

【参考方案2】：

我们可以将 FlexBox 用于 Sticky Footer 和 Header，而无需在 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>

演示 - JSFiddle

注意：检查浏览器是否支持 FlexBox。 caniuse

【讨论】：

完美运行！这应该是公认的答案。

不使用位置有什么好处？

@ftw 未根据页脚高度设置正文底部边距

@saran3h 这个和接受的答案产生不同的结果。接受的答案：页脚始终可见，即使内容大于屏幕大小。这个答案：页脚被推到屏幕/内容的底部，所以如果内容大于屏幕大小，您需要滚动才能看到它。所以一切都取决于需求。

完美。还有一件事：如果其他人想知道小提琴示例中的垂直滚动条来自哪里，只需在 body 元素上设置margin: 0。然后滚动条只会在有足够的内容将页脚推到视野之外时才会显示。

【参考方案3】：

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

demo

CSS

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

【讨论】：

对不起，我需要它来不覆盖内容。我刚刚添加了您建议的内容，看起来不错，但是内容开始了。

@mcvities 我认为页脚固定不适合您的网站，如果您想固定，所以顶部面板固定。我觉得这看起来不错。

@falguni 我认为你有一个错字，px 缺少 bottom。所以应该是bottom:0px 而不是bottom:0。

【参考方案4】：

设置

html, body 
    height: 100%;

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

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

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

【参考方案5】：

下面是一个可行的简单 CSS 解决方案：

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

【讨论】：

问题是关于将页脚固定到页面底部，position: fixed 将元素固定到视口而不是页面。

【参考方案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>

【参考方案7】：

这段代码对我有用：

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

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

【参考方案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();
  
);

【参考方案9】：

除非您以这种方式设置页脚元素，否则您的页脚元素不会固有地固定在视口的底部。因此，如果您碰巧有一个页面没有足够的内容将其一直向下推它最终会出现在视口中间的某个地方；看起来很尴尬，不知道自己该怎么办，就像我高中的第一天一样。

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

您会发现与absolute 定位类似的问题。尽管它确实将有问题的元素从文档的自然流中剔除，但如果您发现自己的页面几乎没有内容可以充实它，它仍然不会将其固定到屏幕底部。

考虑通过以下方式实现：

为<body> 和<html> 标签声明高度值 向嵌套的包装元素声明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>

【参考方案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>  

【参考方案11】：

您可以使用网格布局。它比 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;

有用的链接：

浏览器支持：Can I Use - Grid Layout

完整指南：Grid Laoyut Guid

【参考方案12】：

我的解决方案：

html, body 
  min-height: 100%


body 
  padding-bottom: 88px;


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

【参考方案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;  

<!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>

【参考方案14】：

使用 Flex 和 Bootstrap4（如果不使用 Bootstrap4，使用 flex 属性可以达到相同的效果）

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