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

92

我有以下结构：

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

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

<footer>当有很多内容时，我希望该块位于页面底部；而当仅有几行内容时，我希望该块位于浏览器窗口的底部。

目前，我可以做一个或另一个...但是不能两者都做。

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

css  html  footer 
— 将
source
人们是否愿意评论为什么他们拒绝了一个2岁的问题？
— 2014年
来吧，它已经近6年...
— 威尔

Answers:

99

Ryan Fait的粘性页脚非常好，但是我发现它的基本结构缺少*。

Flexbox版本

如果您足够幸运，可以在不需要支持旧版浏览器的情况下使用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;
}

显示代码段

如果您不能使用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，您现在#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%;
}

显示代码段

当然，您应该质疑我的判断，因为即使没有内容，此代码也会迫使页脚从页面底部掉下来。最后一个诀窍是要改变由所使用的盒模型#main-wrapper，使得min-height中100%包括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结构的页脚。只是要确保footer的height是等于#main-wrapper的padding-bottom，你应该设置。

*我发现Fait的结构存在缺陷是因为它在不同的层次结构上设置了.footerand .header元素，同时添加了不必要的.push元素。

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

Ryan Fait的粘性页脚是一个简单的解决方案，我过去已经使用过几次。

基本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。祝好运！

— 乔什·梅恩（Josh Mein）
source
4
我喜欢他将评论放在底部的方式，适合用于页脚解决方案：D
— Madara的Ghost的
无需更改此特定样式的标记。
— zzzzBov 2012年
@zzzzBov我现在没有太多时间进一步研究这个问题，但是您到底是什么意思呢？
— Josh Mein 2012年
我正在使用移动ATM，因此无法写完整答案，否则我已经做完了。评论更多，所以我记得以后再添加一个答案。
— zzzzBov 2012年
@JoshMein，我添加了一个答案，该答案解释了如何使页脚贴紧而不会弄乱提供的结构。
— zzzzBov 2012年
0

我一直想解决此问题而不添加任何其他标记，因此最终使用了以下解决方案： 

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/

— 加琳娜E
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.