使用flex布局解决经典布局中overflow必须设置高度才能滚动问题 htmlcss技巧css3

本文旨在解决经典布局方案中，左侧菜单栏收缩，主页面无法跟随变化，右侧内容界面需要设置高度才能滚动问题如下图：若要实现下图所示，我们都会使用 “定位” 方式实现。当顶部高度变化，就需要我们调整内容高度。左侧栏变化就需要调整右侧宽度等。
文章图片

如今: 我们可以使用flex方法实现这种布局方案，且无需使用定位方式，所有布局都是一边调整，另一边跟着一起变动，无需通过任何js实现, 更不需要设置高度。话不多说直接上代码：以下代码直接新建一个html文件，粘贴进去就可以看到实际效果。

经典布局 - 锐客网body, html { margin: 0; box-sizing: border-box; }.container { height: 100vh; width: 100vw; display: flex; /* 垂直布局 */ flex-direction: column; }.header { height: 50px; width: 100%; background: #929292; }.context { flex: 1; /* 第一种：设置flex-shrink为0，设置height为0 */ /* 第二种：设置overflow: scroll */ flex-shrink: 0; height: 0; /*overflow: scroll; */ width: 100%; display: flex; }.aside { height: 100%; width: 200px; overflow: auto; }.menu { height: 100px; background: #ccc; border: 5px solid #ddd; }.main { flex: 1; /* 方式一设置flex-shrink为0，设置width为0 */ /* 方式二设置overflow: scroll */ flex-shrink: 0; width: 0; /*overflow: scroll; */ display: flex; flex-direction: column; }.breadcrumb { height: 50px; padding: 10px 50px; }.myapp { flex: 1; overflow: auto; }.page { width: 2000px; height: 2000px; padding: 10px; border: 5px dashed gray; }顶部菜单菜单1 菜单2 菜单3 菜单4 菜单5 菜单6面包屑/标题栏可随意拖动的内容区域

【使用flex布局解决经典布局中overflow必须设置高度才能滚动问题】上面的布局方案主要是要理解flex-shrink为0表示不会被压缩，配合上height为0，flex为1一起就表示永远会占满剩下的区域，不会超出也不会被压缩。这样不用使用定位方式可以轻松实现这种布局，当然也可以用在移动端，例如现在的饿了么，美团外卖等这种类型的布局，直接可以通过上面代码实现。