<div id="app" class="outer"><h3 class="head">Head组件</h3><div class="container"><h3 class="left">Left组件</h3><h3 class="main">Main组件</h3></div></div>
第一种方法：
html,body {height: 100%;margin: 0;padding: 0;}.outer {height: 100%;padding: 100px 0 0;box-sizing: border-box;}h3 {margin: 0;padding: 0;}.head {background-color: antiquewhite;height: 100px;line-height: 100px;text-align: center;margin: -100px 0 0;}.container {display: flex;height: 100%;}.left {background-color: aqua;flex: 2;text-align: center;}.main {background-color: blueviolet;flex: 8;text-align: center;}
效果：
第二种方法：
html,body {height: 100%;margin: 0;padding: 0;}.outer {height: 100%;padding: 100px 0 0;box-sizing: border-box;position: relative;}h3 {margin: 0;padding: 0;}.head {background-color: antiquewhite;height: 100px;line-height: 100px;text-align: center;position: absolute;top: 0;left: 0;width: 100%;}.container {display: flex;height: 100%;}.left {background-color: aqua;flex: 2;text-align: center;}.main {background-color: blueviolet;flex: 8;text-align: center;}
效果：如上图
