【引言】最近在做一个网站，需要实现一个中间内容撑开头尾效果，本来想用本办法定位的方式去做，但是发现能实现效果但是太麻烦了，最终经过参考与实践通过flex布局的方式去实现更为简单，同时grid布局也可以实现，下面附上代码。
【实现效果】flex 实现效果：
div结构如下
1
2
3
4
5
| <div class="container">
<div class="header">头部</div>
<div class="content">内容</div>
<div class="footer">尾部</div>
</div>
|
container的css如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .container {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 auto;
min-height: 100%;
width: 100%;
}
.header, .footer {
background: #fff;
width: 100%;
}
.content {
flex: 1; // 这行代码使得content占据剩余的空间
background: #f0f0f0;
}
|
grid 实现效果：
div 结构如上
css如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .container {
display: grid;
grid-template-rows: auto 1fr auto; // 设置高度
height: 100vh;
}
.header, .footer {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.content {
background-color: #e2e2e2;
padding: 20px;
text-align: center;
}
|
