所谓“Sticky Footer”是一种网页效果。即:页面的内容不足以撑开整个屏幕的高度时,footer置于屏幕底部;当内容超过一屏时,footer会随着内容下移,在内容底部。
如图:
Sticky Footer
html 布局如下:
<div class="box">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
css实现方案:
方案一: absolute
html,
body {
/* 关键 */
height: 100%;
}
.box {
width: 100%;
min-height: 100%; /* 关键 */
position: relative; /* 相对定位 */
}
.header {
height: 100px;
}
.content {
padding-bottom: 100px;
}
.footer {
height: 100px;
position: absolute; /* 绝对定位 */
bottom: 0;
left: 0; /* IE 需要加 */
}
方案二: flex
css代码
html,
body {
/* 关键 */
height: 100%;
}
.box {
min-height: 100%; /* 关键 设置最小高度*/
display: flex;
flex-direction: column; /* 改变主轴方向 */
}
.header,
.footer {
height: 100px;
}
.content {
flex: 1;
/* 自适应 */
}
方案三:flex、flex-shrink、margin-top、vh(css单位)
.box {
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
flex-shrink: 0;
}
.footer {
height: 100px;
/* 自动填满flex布局之后剩余的空间 */
margin-top: auto;
/* 子元素的缩小比例 默认为1: 空间不足时默认会缩小 */
flex-shrink: 0;
}
方案四:flex、vh(css单位)
.box{
/* 关键 */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header,
.footer {
height: 100px;
}
.body{
flex: 1;
}
方案五: min-height、calc
.header,
.footer {
height: 100px;
}
.content {
min-height: calc(100vh - 200px);
}
方案六:table
html,
body {
height: 100%;
}
.box {
display: table;
width: 100%;
min-height: 100%;
}
.header,
.footer {
height: 100px;
}
.content {
display: table-row;
height: 100%;
}
网友评论