<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;
}
效果:如上图