子盒子始终撑满父盒子减去导航的高度，使用calc和flex两种方法。
代码：
子盒子始终撑满父盒子减去导航的高度 - 锐客网 .test {
width: 500px;
height: 40vh;
border: 1px solid #000;
}.test nav {
width: 100%;
height: 100px;
background-color: red;
}.test .content {
background-color: green;
height: calc(100% - 100px);
}.test2 {
width: 500px;
height: 40vh;
border: 1px solid #000;
display: flex;
flex-direction: column;
}.test2 nav {
width: 100%;
background-color: red;
}.test2 .content {
background-color: green;
flex: 1;
}子盒子始终占满父盒子减去导航的高度
height: calc(100% - 100px);
子盒子始终占满父盒子减去导航的高度
利用display:flex实现一盒子固定宽高另一盒子占满剩余宽度【子盒子始终撑满父盒子减去导航的高度，使用calc和flex两种方法】
文章图片
