Pau*_*ren 5 css sticky-footer fluid-layout
我正在寻找一个粘性页脚的解决方案,其高度可能取决于浏览器的宽度.
流畅的设计中的粘性页脚并不是那么简单.我发现了实现粘性页脚的提示,讨论和解决方案.但是,所有这些都取决于页脚的固定和已知高度.在我的例子中,页脚的高度包含文本,行数取决于屏幕的宽度.
我不想进行各种媒体查询和构建一些工作,而是选择干净的CSS解决方案,当屏幕宽度变化时,粘性页脚会自动适应.
你们中的任何人都有最终答案吗？
欢迎来到flexbox的神奇世界!试试这个... 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;.
有关更多信息和其他示例,请参阅http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
来自Mozilla ......
CSS3 Flexible Box或flexbox是一种布局模式,用于在页面上排列元素,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素的行为可预测....注意:尽管CSS Flexible Boxes Layout规范处于候选推荐阶段,但并非所有浏览器都实现了它.
小智 0
尝试这样的事情：
其中粘性页脚的高度是相对于容器的高度，以百分比表示：
#sticky_footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:10%;
background:red;
text-align:center;
}
您可能需要使用媒体查询为文本整理一些边距/填充，但如果没有它们，页脚尺寸将是动态的。