CSS實現div填滿剩余高度

需求：

1. nav和content盒子的高度和瀏覽器高度相同，且不能出現縱向滾動條
2. 綠色盒子高度固定，比如：50px
3. 紫色盒子填充剩余的高度

BODY部分的代碼：

方式一：絕對定位

 

方式二：box-sizing的兩種方法

1. 方法一：

 

2. 方法二：

谷歌瀏覽器運行結果

 

總結：這三種方法可以實現content盒子填充剩余部分的高度，且沒有縱向滾動條，網上的flex布局還是會出現縱向滾動條，不推薦。

 

 

 參考文章：

https://blog.csdn.net/weixin_43331146/article/details/86560506