47

这里要注意的关键是页脚的高度不会固定，但会随其内容而变化。

当我说“粘性页脚”时，我使用它的通用定义是“永远不会高于视口底部的页脚，但如果有足够的内容，它将被隐藏，直到用户滚动下到足够远的地方才能看到它。”</p>

另请注意，我不需要支持旧版浏览器。如果 CSSdisplay: table和相关属性在这里有所帮助，它们是公平的游戏。

4

3 回答 3

101

这里的所有其他解决方案都已过时，要么使用 JavaScript，要么使用tablehack。

随着CSS flex 模型的出现，解决可变高度粘性页脚问题变得非常非常容易：虽然 Flexbox 主要以水平方向布局内容而闻名，但实际上对于垂直布局问题也同样适用。您所要做的就是将垂直部分包裹在一个弹性容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。

请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。

当今使用的 96% 以上的浏览器都支持flex 模型。

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#body {
  flex: 1;
  border: 1px solid red;
}

#footer{
  background: lime;
}
<div id="wrapper">
  <div id="header">Title</div>
  <div id="body">Body</div>
  <div id="footer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

于 2014-10-25T00:18:44.227 回答
17

你完全可以在纯 CSS 中做到这一点。 点击链接。

这个概念使用display: table-cell组织你的页面部分而不是正常的display: block.

HTML

<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>
    <section class="Row Expand"><h2>Awesome content</h2></section>
    <footer class="Row"><h3>Sticky footer</h3></footer>
</body>

CSS

.Frame {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.Row {
    display: table-row;
    height: 1px;
}
.Row.Expand {
    height: auto;
}
于 2012-09-04T01:21:19.877 回答
-1

您可以将页脚粘贴到视口的底部，只需：

position: fixed;
bottom: 0;

但是，即使有内容，它也会显示出来。

为防止这种情况，您将需要一些 JavaScript：

(window.onscroll = function() {
    var foot = document.getElementById('footer');
    foot.style.position = "static";
    if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
        foot.style.position = "fixed";
})();

（(...)();包装器使 onscroll 函数在页面加载时被调用一次，因为这也是必需的）
（上面的函数未经测试，但应该可以工作 - 如果没有，请告诉我，我将制作一个实际的测试页面）

于 2012-05-31T00:10:32.297 回答