CSS实现div填满剩余高度

需求：

1. nav和content盒子的高度和浏览器高度相同，且不能出现纵向滚动条
2. 绿色盒子高度固定，比如：50px
3. 紫色盒子填充剩余的高度

BODY部分的代码：

方式一：绝对定位

 

方式二：box-sizing的两种方法

1. 方法一：

 

2. 方法二：

谷歌浏览器运行结果

 

总结：这三种方法可以实现content盒子填充剩余部分的高度，且没有纵向滚动条，网上的flex布局还是会出现纵向滚动条，不推荐。

 

 

 参考文章：

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