子盒子始终撑满父盒子减去导航的高度，应用calc和flex两种办法。
代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>子盒子始终撑满父盒子减去导航的高度</title> <style> .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; } </style></head><body> <div class="test"> <nav>导航导航</nav> <div class="content"> 子盒子始终占满父盒子减去导航的高度 <br> height: calc(100% - 100px); </div> </div> <hr> <div class="test2"> <nav>导航导航</nav> <div class="content"> 子盒子始终占满父盒子减去导航的高度 <br> 利用display:flex实现一盒子固定宽高另一盒子占满残余宽度 </div> </div></body></html>