<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>弹性盒-圣杯布局</title> <style> /* 顶部和底部可固定，中间部分随上下高剩余高度而变，中间两边栏固定 */ *{ margin: 0; padding: 0; } .container{ display: flex; height: 100vh; flex-direction: column; /*纵向排列*/ } header{ background-color: #0086B3; } section{ flex: 1; /*占一行*/ display: flex; background-color: pink; } footer{ background-color: #0086B3; } .left{ background-color: red; flex: 0 0 100px; /*给出左宽*/ } .center{ flex: 1; /*独占1行*/ background-color: pink; } .right{ flex: 0 0 100px; /*给出右宽*/ background-color: red; } </style> </head> <body> <div class="container"> <header>头部</header> <section> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div> </section> <footer>底部</footer> </div> </body> </html>