页面或内容底部的页脚，以较低者为准

Posted 2023-03-21

技术标签:

【中文标题】页面或内容底部的页脚，以较低者为准【英文标题】：Footer at bottom of page or content, whichever is lower 【发布时间】：2012-08-27 16:15:54 【问题描述】：

我有以下结构：

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

我使用 javascript 在<article> 中动态加载内容。因此，<article> 块的高度可以改变。

我希望<footer> 块在有很多内容时位于页面底部，或者在只有几行内容时位于浏览器窗口底部。

目前我可以做一个或另一个......但不能同时做。

那么有谁知道我该怎么做 - 让 <footer> 贴在页面/内容的底部或屏幕底部，具体取决于哪个较低。

【问题讨论】：

【参考方案1】：

Ryan Fait's sticky footer 很好，但是我发现它的基本结构缺乏*。

弹性盒版本

如果您足够幸运，可以使用 flexbox 而无需支持旧版浏览器，则粘页脚变得非常容易，并且支持动态大小的页脚。

使用 flexbox 让页脚粘在底部的技巧是让同一容器中的其他元素垂直弯曲。只需要一个包含display: flex 的全高包装元素和至少一个flex 值大于0 的兄弟元素：

_CSS:

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;


#main-wrapper 
  display: flex;
  flex-direction: column;
  min-height: 100%;


article 
  flex: 1;

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;

#main-wrapper 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;

article 
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;

header 
  background-color: #F00;

nav 
  background-color: #FF0;

article 
  background-color: #0F0;

footer 
  background-color: #00F;

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

如果你不能使用 flexbox，我选择的基本结构是：

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

这并不遥远：

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

让页脚粘住的技巧是让页脚锚定到其包含元素的底部填充。这要求页脚的高度是静态的，但我发现页脚通常是静态高度。

_HTML:

<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>

_CSS:

#main-wrapper 
    padding: 0 0 100px;
    position: relative;


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

#main-wrapper 
  padding: 0 0 100px;
  position: relative;


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


header 
  background-color: #F00;

nav 
  background-color: #FF0;

article 
  background-color: #0F0;

footer 
  background-color: #00F;

<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

将页脚锚定到#main-wrapper 后，您现在需要#main-wrapper 至少是页面的高度，除非其子项更长。这是通过使#main-wrapper 具有min-height 的100% 来完成的。您还必须记住，它的父级 html 和 body 也需要与页面一样高。

_CSS:

html,
body 
    height: 100%;
    margin: 0;
    padding: 0;


#main-wrapper 
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;


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

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;


#main-wrapper 
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;


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


header 
  background-color: #F00;

nav 
  background-color: #FF0;

article 
  background-color: #0F0;

footer 
  background-color: #00F;

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

当然，您应该质疑我的判断，因为这段代码会迫使页脚从页面底部滑落，即使没有内容也是如此。最后一个技巧是更改#main-wrapper 使用的盒子模型，使100% 的min-height 包含100px 填充。

_CSS:

html,
body 
    height: 100%;
    margin: 0;
    padding: 0;


#main-wrapper 
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;


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

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;


#main-wrapper 
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;


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


header 
  background-color: #F00;

nav 
  background-color: #FF0;

article 
  background-color: #0F0;

footer 
  background-color: #00F;

 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

你有了它，一个带有原始 HTML 结构的粘性页脚。只要确保footer 的height 等于#main-wrapper 的padding-bottom，就应该设置好了。

^{* 我发现 Fait 的结构有问题的原因是因为它在不同的层级上设置了 .footer 和 .header 元素，同时添加了一个不必要的 .push 元素。}

【讨论】：

我需要添加#main-wrapper *:first-child margin-top: 0; ，否则页面会在第一个孩子的上边距处太长（导致短页面上不必要的滚动条）。感谢 @zzzzBov 的详尽解释，尤其是提到 flex-direction（希望我能早点找到这个 - 可以为我节省几个小时！:) Flexbox 版本在 IE11 中不适合我，但另一种方法对我来说很好！谢谢+1！ @Matt，你需要使用浏览器前缀才能让 flexbox 在 IE11 中工作。使用 autoprefixer 之类的工具，您永远不必担心手动添加它们。粘性页脚链接似乎已损坏，因为他的网站被转换为他的纪念通知。另外，由于 robots.txt 的设置，没有缓存版本【参考方案2】：

Ryan Fait's sticky footer 是一个简单的解决方案，我过去曾多次使用过。

基本 HTML：

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS：

* 
    margin: 0;

html, body 
    height: 100%;

.wrapper 
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */

.footer, .push 
    height: 142px; /* .push must be the same height as .footer */


/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

将其翻译为类似于您已经通过以下方式获得的结果：

HTML：

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS：

* 
    margin: 0;

html, body 
    height: 100%;

.wrapper 
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */

footer, .push 
    height: 142px; /* .push must be the same height as .footer */

只是不要忘记更新包装边距上的负数以匹配页脚的高度并推送 div。祝你好运！

【讨论】：

我喜欢他将评论放在底部的方式，适合作为页脚解决方案：D 无需更改此特定样式的标记。 @zzzzBov 我现在没有太多时间进一步研究这个问题，但你到底是什么意思？我在我的移动 ATM 上，所以我无法写出完整的答案，否则我已经这样做了。评论更多，所以我记得稍后添加答案。 @JoshMein，我添加了一个答案，解释了如何在不弄乱提供的结构的情况下制作页脚。【参考方案3】：

我希望在不添加任何额外标记的情况下解决此问题，因此我最终使用了以下解决方案：

article 
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/


footer 
  height: 50px;


header 
   height: 50px;


nav 
  height: 50px;

<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

您必须知道页眉、导航和页脚的高度才能设置文章的最小高度。这样，如果文章只有几行内容，页脚将粘在浏览器窗口的底部，否则它将位于所有内容的下方。

您可以在此处找到上面发布的此解决方案和其他解决方案：https://css-tricks.com/couple-takes-sticky-footer/

【讨论】：

【参考方案4】：

我想用 css-grid 来解决这个问题。我将在您的#main-wrapper div 中制作两部分。第一个用于内容，第二个用于页脚。

// HTML 

<body>
<div id="main-wrapper">
  <div class="main-content">
    <header></header>
    <nav></nav>
    <article></article>
  </div>
  <footer class="footer">
    footer
  </footer>
</div>
</body>

在css中

#main-wrapper 
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;

.footer 
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: #a45657;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 20px;

您可以查看工作演示here（请查看项目视图）。这段代码取自我最喜欢的 CSS 网站css-tricks。

【讨论】：

以上是关于页面或内容底部的页脚，以较低者为准的主要内容，如果未能解决你的问题，请参考以下文章

CSS：页面底部的页脚重叠内容并具有更高的宽度

DIV 底部的页脚而不是页面底部。引导程序

网页的页脚没有延伸到页面的最底部

引导程序中的页脚[重复]

为啥我的页脚不在页面底部？

wordpress - 如果屏幕大于页面，底部的页脚