非固定定位实现上下栏布局

1. 前言

除了将上下栏固定在屏幕上，我们还有另一种选择，那就是上下栏和主盒子都在屏幕的那个位置不动，那有人可能会说了，主盒子里的内容要是多了，超出了屏幕的高度该怎么办呢？这就要用到一个属性叫做 overflow-y ：

2. 实现

运行结果：

可以看到这个案例虽然文字撑开了内容导致溢出，然后出现滚动条可以上下滚动，但背景色却没有变化，这是因为我们是在主盒子上面加的背景色。
这种靠子元素来撑开内容的溢出应该把样式全部写在子元素上面去，父元素只提供一个高度和一个 overflow-y 即可：

运行结果：

3. 小结

这里一定要记住这几个要点：

• 上栏和下栏的宽度加起来要刚好是屏幕的高度
• 下栏一定要写 overflow-y: auto
• 下栏的背景什么的最好写在子元素上，除非你就是想要这种背景不动的效果