这里要注意的关键是页脚的高度不会被修复,但会随内容而变化.
当我说"粘性页脚"时,我按照我的理解使用它是"一个从不高于视口底部的页脚的常见定义,但是如果有足够的内容,它将被隐藏直到用户滚动远远看不到它."
另请注意,我不需要支持旧版浏览器.如果CSS display: table和相关属性在这里有帮助,那么它们就是公平游戏.
Dan*_*scu 92
这里的所有其他解决方案都已过时,要么使用JavaScript,要么使用table黑客攻击.
随着CSS flex模型的出现,解决可变高度粘性页脚问题变得非常非常容易:虽然主要用于在水平方向上布置内容,但Flexbox实际上也适用于垂直布局问题.您所要做的就是将垂直部分包装在Flex容器中,然后选择要扩展的部分.它们会自动占用容器中的所有可用空间.
注意标记和CSS有多简单.没有桌子或任何东西.
所有主流浏览器以及涉嫌IE11 + 都支持 flex模型,尽管我的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 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>cer*_*eny 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;
}