需求
实现footer永远在浏览器窗口的底部。当页面内容超过一屏时，在内容的最底端；当页面内容少于一屏时，footer在窗口的底端，见下图。
demand.png
实现方式
- header 和 footer高度固定
- flex布局
html代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>sticky footer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
header
</div>
<div class="content">
content
</div>
<div class="footer">
footer
</div>
</body>
</html>
1.固定高度
css代码
.header{
background: #6f0096;
height: 60px;
}
.content{
background: #e8e8e8;
min-height: calc(100vh - 60px - 60px);
}
.footer{
background: #000000;
color:#ffffff;
height: 60px;
}
其中，已知header和footer的高度，则要使footer在窗口的低端，只需content的min-height值为100vh - 60px - 60px.
2.flex布局
css代码
body{
display: flex;
flex-direction: column;
height: 100vh;
text-align: center;
margin: 0px;
}
.header{
background: #6f0096;
}
.content{
background: #e8e8e8;
flex:1;
}
.footer{
background: #000000;
color:#ffffff;
}
其中，body分为三部分：header、content和footer。body的height值为100vh，display值为flex，且以列的方式展示。其次是将content中的flex属性值为1。这样就实现了footer置底。
在这里有两个知识点的理解：
height:100vh：其中vh是viewport height视窗的高度。1vh是视窗的1%，则100vh就是视窗的100%。（其中视窗是浏览器内部的可见视区，不包括任务栏标题栏以及底部工具栏的浏览器区域大小）。flex: 1：flex属性是个复合属性，由flex-basis、flex-grow和flex-shrink三个属性确定，其语法：flex: none | auto | initial | [ <flex-grow> <flex-shrink> ? || <flex-basis> ]。
详细见下表（暂不讨论兼容性问题）。若flex: 1，则其计算值为[1,1,0%]，即伸缩比例都是1。flex-grow值为1，存在多余空间时项目放大；flex-shrink值为1，空间不足时项目缩小。
| 属性 | 可选值 | 默认值 | 含义 | 备注 |
|---|---|---|---|---|
| flex-basis | length、percentage、auto | auto | 弹性条目的初始主轴尺寸 | 在flex属性中该值如果被省略则默认为0%；在flex属性中该值如果被指定为auto，则伸缩基准值的计算值是自身的 width设置;如果自身的宽度没有定义，则长度取决于内容。 |
| flex-grow | integer | 0 | 当容器有多余的空间时，这些空间在不同条目之间的分配比例 | 在flex属性中该值如果被省略则默认为0，不能取负值。 |
| flex-shrink | integer | 1 | 当容器的空间不足时，各个条目尺寸缩小的比例 | 在flex属性中该值如果被省略则默认为1，不能取负值。 |
总结：
相比较于这两种方式，我比较倾向于使用flexbox方式实现。因为第一种方式需要知道头部和footer的固定高度，然而有时项目中头部和footer的高度并非是固定的。
网友评论