弹性盒子-圣杯布局

html

 <div class="header">我是页眉</div>

    <div class="contain">
        <div class="main">我是主内容</div>
        <div class="left">我是侧边栏</div>
        <div class="right">我是右边栏</div>
    </div>

 <div class="footer">我是页脚</div>

css

* {
       padding: 0;
       margin: 0;
     }
   html,body{
     
        height:100%;/*高度占据整个窗口*/
       
     }
     body{
        display: flex;
        flex-direction:column;
     }
     .header {
        background: #00b8ff;
        /* 头、脚尺寸固定，不放大、不缩小 */
        flex:0 0 50px;
     }
     .contain {
        display: flex;
        flex: 1;/*让子元素都有相同的长度*/
        background: rgba(34, 216, 107, 0.97);
     }
     .main {
        flex-grow: 1;
        order: 2;
        background: pink;
     }
     .right{
        order: 3;
      background:yellow;
     }
     .footer {
        /* 头、脚尺寸固定，不放大、不缩小 */
        flex:0 0 60px;
        background: greenyellow;
     }

利用弹性布局之后，当页面窗口改变，页面会自动调整大小