flex实现上下固定，中间滚动的效果【假的fixed-真的优化】【四】

之前这一篇写的有问题，也是一时间对弹性盒子特别着迷，以为自己了解不少，遇到坑之后发现自己依然对其知之甚少

先说，为什么中间那一块而会出现滚动条，因为文本或者是内容超出范围，就叫做overflow—也就是溢出，为了让用户能看到全部信息，就给个滑动条。

问题来了，超出了谁的范围？很明显是父元素，超出了父元素的范围，在弹性盒子这个上下三栏布局，中间的盒子是不设置宽度的，那没有宽度怎么比较呢？

先提一些基本特性吧

1.html,body{100%,100%},获取的是浏览器可视宽高，这个我之前的博客有相关描述，有兴趣可以去看一下。

2.设置上述属性后,html和body就占满整个可视屏幕，想让中间不设置高度的栏目被约束，就必须拿到一个固定值的高度，也可以是相对变动的固定值

3.先继续，待会儿回来解释。flex-item有个属性叫flex-grow,功能是父元素有剩余空间时以这个值为标准进行分配。我们先假想中间栏目h为0，没有高度，那么上下两栏是吃不住这么多的高度的，即有剩余空间，换句话，这些空间都是中间栏目的，如果中间栏目的内容高度超出这个剩余空间高度，滚动条就会出现。

4.回到第二个环节，假如不对这三个栏目设置高度约束，那么他们的父元素高度由内容撑开，那么，中间栏目有多高，父元素就被撑多大，所以，父元素与中间栏目同步变化，失去约束作用，即不会出现滚动条

上demo

f是类名 display:flex,cen是text-align:center,常用属性抽取，特别方便，减去无用重复书写

在这里，我让html,body获得了浏览器可视区域的宽高，方便让flex-box得到这个可视宽高

问题来了，我为什么非要获取浏览器的可视宽高呢，因为我要让上下两栏固定，中间自由撑开，实现伪fixed。

flex-box是body的子元素，通过高度100%拿到父元素的高度，因为高度不会继承，需要自己去取，用迅哥儿的话叫拿来主义，拿到之后设置元素排列方向和是否换行，很明显，这里是纵向排列，不需要换行

footer 和 header 我是让他横向排列的，也不需要换行排列方式是space-between

section的结构很简单，超出显示滚动条

section里面就是一些span

整体结构分析完毕，效果是这样的，如图

加了一点边框阴影

假如内容不足以撑满，岂不是中间缩回去了，底部栏目上去了，我的上下固定不就凉了吗？

我刚才提到了flex-grow,这个属性该登场了，就算我没有这么多内容，也要占满这一块儿。内容不足的情况：

底部也没上去，OK

tips：section这个元素既是items 也是 flex-box ，因为是items,所以可以flex-grow,同时也是flex-box,才能设置子元素的排列方式

踩了这个坑真难受，日