html如何实现上中下布局(上下固定中间自适应)

前端切图的时候经常会遇到需要上下固定宽度，中间自适应的页面布局，下面是实现的代码。

工具/原料

htmlcss

方法/步骤

1、首先我们打开html编辑器，新建3个盒子，高度都是200px,代码如下

2、然后我们通过定位固定头尾盒子,代码如下

3、显示的效果如下

4、然后中间盒子设置样式position:absolute;top:200px挢旗扦渌;bottom:200px;height:auto;代码如下，

5、最后显示效果如下