html中
<div class="flexLayoutr"> <div class="div_head"></div> <div class="div_content">中间区域</div> <div class="div_foot"></div> </div>
css中
*{ margin: 0; padding: 0; } .flexLayout{ display: flex; display: -webkit-flex; min-height: 100vh; flex-direction: column; } .div_head{ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); width: 100%; position:absolute; z-index:5; top:0; } .div_bottom{ width:100%; position:absolute; z-index:200; bottom:0; } .div_content{ width:100%; overflow:auto; top:6.8rem; position:absolute; z-index:10; bottom:4.6rem; }