本文探讨了如何实现类似Element-UI中Header固定、Aside与Main区域独立滚动的效果。通过控制Overflow属性和取消Position:fixed，博主遇到了滚动条无法启用的问题。经过一系列尝试，最终发现滚动条在移除Header的Position:fixed后出现。博客分享了这一过程，并建议采用逆向思维设置样式来达到预期的布局效果。
最近看了element-ui的官网感觉这个设计不错。
其中Aside可以滚动，Main区域可以滚动，Header区域不能滚动，且整个页面也不能滚动。
然后我自己写了个，结果发现惨不忍睹。
去网上查了下，stackoverflow上面说这种是控制overflow来实现取消滚动条的，然后我把官网body的overflow注释掉发现还是没有重新启用滚动条。
之后发现app这个div也有overflow-y的控制，再次取消，还是没有重新启用。
之后联想到页头是使用的position:fix来固定的，所有尝试了下取消页头的position:fix
之后发现滚动条居然出现了！
前后对比如下，确实后面那种丑了很多。
所以我们要实现前面那种样式，使用逆向思维，按照取消的样式这几点设置即可。
扫一扫
1989
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
