Question

这里要注意的关键是页脚的高度不会被修复，但会随着内容的不同而变化。

当我说“粘性页脚”时，我按照我的理解使用它是“一个从不高于视口底部的页脚的常见定义，但是如果有足够的内容，它将被隐藏直到用户向下滚动到足以看到它。“

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

Answer 1

此处的所有其他解决方案都已过期，要么使用JavaScript，要么使用table黑客。

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

注意标记和CSS有多简单。没有桌子或任何东西。

flex模型是supported by all major browsers以及涉嫌IE11 +，尽管我的IE还没有正确呈现这个片段。

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 orange;
}

#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>

Answer 2

你绝对可以在纯CSS中做到这一点。 Clicky the linky.

此概念使用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;
}

Answer 3

您可以使用以下命令将页脚粘贴到视口的底部：

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函数在页面加载时被调用一次，因为这也是必需的）
（以上功能未经测试，但应该有效 - 如果没有，请告诉我，我会制作一个实际的测试页面）

如何在纯CSS中定义可变高度的粘性页脚？

3 个答案: