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;
}利用弹性布局之后，当页面窗口改变，页面会自动调整大小
作者：DivMa
链接：https://www.jianshu.com/p/b99a75416ccc