首页手记弹性盒子-圣杯布局

弹性盒子-圣杯布局

标签：

Html/CSS

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