弹性盒子-圣杯布局

html

 
我是页眉

    

        
我是主内容
        
我是侧边栏
        
我是右边栏
    

 
我是页脚

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;
     }

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