如何制作一个粘性的页脚 [英] How to make a fluid sticky footer
问题描述
我正在寻找一种解决方案，以使页脚具有粘性，其高度可能取决于浏览器的宽度.
I'm looking for a solution to have a sticky footer which height may be dependent on the width of the browser.
流体设计中的粘性页脚并不是那么简单.我发现了实现粘页脚的提示，讨论和解决方案.但是，所有这些都取决于页脚的固定高度和已知高度.就我而言，页脚的高度包含文本，行数取决于屏幕的宽度.
Sticky footers in fluid designs are not all that trivial. I've found hints, discussions and solutions to implement sticky footers. However, all these are dependent on a fixed and known height of the footer. In my case, the height of the footer contains text and the number of lines is dependent on the width of the screen.
我宁愿选择一种干净的CSS解决方案，使粘性页脚在屏幕宽度变化时自动适应，而不是进行各种媒体查询和构建工作基础.
Rather than making al sorts of media queries and building some work aorund, I'm would prefer a clean CSS solution in which the sticky footer auto adapts when the width of the screen varies.
你们中的任何人有最终的答案吗?
Does anyone of you have the ultimate answer?
推荐答案
欢迎来到 flexbox 的神奇世界！试试看... http://jsfiddle.net/n5BaR/
Welcome to the magical world of flexbox! Try this out... http://jsfiddle.net/n5BaR/
<body>
<style>
body {
padding: 0; margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
padding: 1em;
}
header, footer {
background-color: #abc;
padding: 1em;
}
</style>
<header>Hello World</header>
<main>Content</main>
<footer>
Quisque viverra sodales sapien, in ornare lectus iaculis in. Nam dapibus, metus a volutpat scelerisque, ligula felis imperdiet ipsum, a venenatis turpis velit vel nunc. In vel pharetra nunc. Mauris vitae porta libero. Ut consectetur condimentum felis, sed mattis justo lobortis scelerisque.
</footer>
</body>
填充物和边距看起来很漂亮，但是魔术发生在display: flex; min-height: 100vh; flex-direction: column;和flex: 1;上.
The paddings and margins are just to be a little pretty, but the magic happens with display: flex; min-height: 100vh; flex-direction: column; and flex: 1;.
有关更多信息和其他示例，请参见 http://philipwalton .github.io/solved-by-flexbox/demos/sticky-footer/
For more information and other examples, see http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
来自 Mozilla ...
CSS3灵活框(即flexbox)是一种布局模式，可为 页面上元素的排列，使元素的行为 可以预测何时页面布局必须适应不同的屏幕 尺寸和不同的显示设备. ...注意:虽然CSS灵活 Boxes Layout规范处于候选推荐"阶段， 并非所有的浏览器都实现了它.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. ... Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it.
这篇关于如何制作一个粘性的页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
