1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #container { 13 height: 508px; 14 background: #1daeee; 15 16 display: flex; 17 flex-direction: column; 18 } 19 20 .con1 { 21 width: 100%; 22 height: 100px; 23 background: aqua; 24 border-bottom: 1px solid #444444; 25 } 26 27 .con2 { 28 width: 100%; 29 flex: 1; 30 overflow-y: scroll; 31 overflow-x: hidden; 32 background: red; 33 font-size: 1000px; 34 } 35 36 .con3 { 37 width: 100%; 38 height: 100px; 39 background: green; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="container"> 45 <div class="con1"></div> 46 <div class="con2"> 47 <p>1</p> 48 </div> 49 <div class="con3"></div> 50 </div> 51 </body> 52 </html>
效果是
上下两块不随中间滑动而滑动
方法要点：
一，父类元素高度不能设置百分比
二，父类元素设置盒子模式 display : flex
三，上下两个子元素设置固定宽高
四，中间元素设置，flex：1 和overflow-y:scroll