代码:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body { height: 100%; margin: 0; } .p1 { height: 100%; display: flex; flex-direction: column; } .p2 { flex: 1; overflow: auto; display: flex; flex-direction: column; } .p2-1 { height: 40px; background: yellow; } .p3 { height: 50px; background: blue; } .p4 { flex: 1; overflow: auto; background: gray; display: flex; flex-direction: column; } .p5 { background: red; height: 200px; } .p5-1 { flex: 1; overflow: auto; } .p5-2 { background: pink; height: 200px; } .p6 { height: 200px; background: green; } </style> <body> <div class="p1"> <div class="p2"> <div class="p3"> </div> <div class="p4"> <div class="p5"> </div> <div class="p5-1"> <div class="p6"> 我是滚动的 </div> <div class="p6"> 我是滚动的 </div> <div class="p6"> 我是滚动的 </div> </div> <div class="p5-2"> </div> </div> </div> <div class="p2-1"> </div> </div> </body> </html>
运行结果 :绿色的是可以滚动的