标题固定，内容滚动的css布局方式总结

最近在项目中遇到了一个样式问题，需要样式内容中，标题部分粘性定位于一个地方，内容部分滑动，滑动过程中标题位置不动。

这是一种挺常见的场景，但对于我来说还真没有在实际开发中遇到很多。于是我最开始的想法就是使用position: sticky，将标题进行粘性定位，效果也很快出现。

但是令我没有想到的是，这个position: sticky的兼容性太差了，特别对于IE还有safari，后来测试就来找我，说在老版本的iPad上边用浏览器打开样式是有问题的，我排查后发现，在老iPad上边sticky属性直接就无用了。

这个时候我脑子里闪过几种解决方案，一种是在css中添加兼容指令，一种是使用vant组件中的粘性定位，一种是使用position: fixed进行定位，但是结果发现这三种方式效果都不怎么样。

花费了近一个小时的试错，我觉得这个问题再不解决就太耽误时间了，最后就选择问旁边同事了，结果他说了一个他常用的方法，而且用起来非常爽。

方法如下：
在最外层盒子上设置display: flex; flex-direction: column；然后标题盒子可以不设置属性，对于内容盒子设置overflow-y: auto，此时就可以实现我们想要的标题固定而内容部分滑动的效果，但是我们会发现下边的内容部分会有一个滚动条，看起来就很丑，那么关于如何消除滚动条我已经在之前的博客中总结过，使用起来之后，最后就可以达到完美的效果并且没有兼容性问题。