如何在纯 CSS 中定义可变高度的粘性页脚？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10825879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can a variable-height sticky footer be defined in pure CSS?
提问by Alan H.
The key to note here is the height of the footer is not going to be fixed, but will vary with its content.
这里要注意的关键是页脚的高度不会固定，而是会随着其内容而变化。
When I say “sticky footer,” I use it in what I understand to be the common definition of “a footer that is never higher than the bottom of the viewport, but if there is enough content, it will be hidden until the user scrolls down far enough to see it.”
当我说“粘性页脚”时，我在我理解的通用定义中使用它“永远不会高于视口底部的页脚，但如果有足够的内容，它将被隐藏，直到用户滚动下到足够远的地方才能看到它。”
Note also I don't need to support legacy browsers. If CSS display: table& related properties help here, they are fair game.
另请注意，我不需要支持旧版浏览器。如果 CSSdisplay: table和相关属性在这里有帮助，那么它们就是公平的游戏。
回答by Dan Dascalescu
All other solutions here are out of date and either use JavaScript, or tablehacks.
这里的所有其他解决方案都已过时，要么使用 JavaScript，要么使用tablehacks。
With the advent of the CSS flex model, solving the variable-height sticky footer problem becomes very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.
随着CSS flex 模型的出现，解决可变高度粘性页脚问题变得非常非常容易：虽然 Flexbox 主要以水平方向布局内容而闻名，但实际上 Flexbox 也同样适用于垂直布局问题。您所要做的就是将垂直部分包裹在一个 flex 容器中，然后选择要扩展的部分。它们会自动占用容器中的所有可用空间。
Note how simple the markup and the CSS are. No table hacks or anything.
请注意标记和 CSS 是多么简单。没有桌子黑客或任何东西。
The flex model is supported by 96%+ of the browsersin use today.
目前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>回答by cereallarceny
You can absolutely do this in pure CSS. Clicky the linky.
你绝对可以在纯 CSS 中做到这一点。 单击链接。
This concept uses display: table-cellorganize your page sections rather than the normal display: block.
这个概念使用display: table-cell组织您的页面部分而不是正常的display: block.
HTML
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
CSS
.Frame {
display: table;
table-layout: fixed;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
回答by Niet the Dark Absol
You can stick the footer to the bottom of the viewport just with:
您可以使用以下命令将页脚粘贴到视口的底部：
position: fixed;
bottom: 0;
However that will make it appear even if there's content.
但是，即使有内容，这也会使它出现。
To prevent this, you will need some JavaScript:
为了防止这种情况，您将需要一些 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";
})();
(The (...)();wrapper makes the onscroll function get called once when the page loads, since that's needed too)
(The above function is untested, but should work - if it doesn't, let me know and I'll make an actual test page)
（(...)();包装器使 onscroll 函数在页面加载时被调用一次，因为这也是需要的）
（上述函数未经测试，但应该可以工作 - 如果没有，请告诉我，我将制作一个实际的测试页面）
