我的姑娘，我好想你。
示意图
示意图如上图，贴合名片的那个页面了，用这个案例来演示下。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="page"> <div class="head"> </div> <div class="container"> <div class="left-scroll"> <div class="text">我是内容，请给我设置文字吧</div> </div> <div class="right-scroll"> <div class="text">我是内容，请给我设置文字吧</div> </div> </div> </div> </body> </html> <style lang="scss"> *{ margin: 0; padding: 0; } .page{ height: 100vh; /* 页面高度100vh，100vh就是整个屏幕的高度 */ display: flex; flex-direction: column; /* 设置为flex布局，并垂直 */ overflow: hidden; } .head{ height: 100px; width: 100%; background: #999; } .container{ flex: 1; /* flex:1占据剩余空间 */ display: flex; /* 设置为flex */ overflow: hidden; } .container .left-scroll{ width: 100px; height: 100%; background: red; overflow-y: auto; } .container .right-scroll{ flex: 1; height: 100%; background: blue; overflow-y: auto; } .text{ height: 3000px; } </style>
布局效果如下：
注意
除了滚动区域外，滚动区域的上级元素都要overflow:hidden，否则就会判定为上级元素会滚动。
原因见下方。
滚动形成的要素
当元素高度，达到以上条件，才会形成滚动区域。
即蓝色滚动区域高度固定，设置overflow:auto或者scroll，红色的是内容，要超过滚动区域的高度。
