固定定位实现上下栏布局

1. 前言

上下栏通常是一直存在在屏幕上，将上下栏固定在屏幕的特定位置，然后为内容添加合适的边距。

一听到要把什么东西固定在屏幕上的话，那么第一时间脑海里反应出来的应该就是固定定位。

2. 实现

将上栏以及下栏固定在屏幕的特定位置，然后主盒子添加合适的上下边距：

运行结果：

3. 小结

大家在做这个案例的时候最好在元素内写上一些文字或者填充一些渐变色来获得更清晰的显示效果。

下一小节我们来讲讲为什么要在中间的 DOM 元素上写一个上下边距。