Fe-interview: [css] 第209天 实现一个上下固定，中间自动填满的布局

[haizhilin2013]

第209天 实现一个上下固定，中间自动填满的布局

我也要出题

[everast2015]

方法一、使用定位的方法，上下定高，中间内容使用top:200px;bottom:200px;撑开

[wangwenquan1234]

利用flex布局，flex-direction:column 定义排列方向为竖排
header footer 定高，中间部分flex:1; 一样可以实现
需要注意的是body和container容器需要设置高度100%;

[forever-z-133]

方法三：上下定位，中间 height: 100% 加 padding。

个人更喜欢方法二。

[Holybasil]

display:grid;
grid-template-rows: 200px 1fr 200px;
height: 100%;
width: 100%;