0.初始化所有标签
/* 重置所有标签 */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 必须定义父级宽高 */
html,
body {
height: 100%;
width: 100%;
}
1.父元素
#app {
width: 100%;
height: 100%;
display: flex; /* 布局 */
flex-direction: column; /* 上下方向 */
background: white;
}
2.子元素-固定高度
/* 上边 */
#top {
/* 固定高度 */
height: 60px;
/* 固定高度的Div不占据剩余空间 */
flex: 0 0 auto;
background: red;
}
3.子元素-占剩余父级元素所有高度
/* 下边 */
#bottom {
/* 占父级元素剩余的高度 */
/* height: calc(100% - 60px); */
flex: 1 1 auto;
background: blue;
}
网友评论