HTML+CSS实现div的高度自适应填满剩余空间的7种方法

CSS实现div填充剩余高度

转发:https://my.oschina.net/linsk1998/blog/3005190

如图上下两部分，上面部分适应内容的高度，下面部分填充剩余部分。

 

当下面内容不够时，在下面部分出现滚动条

有2种情况

1.上面内容的高度适应内容，只有2种方法（flex、quirks+table）

2.上面内容为固定高度，除了上面2种方法，方法还有（borderbox、position:fixed、top+bottom、javascript、calc）

先说结论

推荐使用flex布局

1.flex布局，兼容性好，大多数浏览器都可以支持(加上前缀)。即便是不支持的浏览器，也能优雅降级。缺点是各种带前缀的属性多，让人看了就不想学，坑多。把这个功能写成CSS类就很好使用，具体可以参考我的另一篇文章。

2.quirks+table。这个可以降级用，但是HTML结构和flex布局不同，所以只能在生成HTML的UI库里用。

3.提到borderbox，就得说说W3C标准盒模型和传统IE盒模型的历史了。W3C标准盒模型(content-box)设定的高度为内部高度，传统IE盒模型(border-box)设定的高度为外部高度。最终IE6起支持W3C标准盒模型，并提供了quirks模式来兼容旧IE的盒模型。长期以来都推荐使用W3C标准盒模型，淘汰传统IE盒模型，因此这种做法没有被广泛使用。而content-box布局困难，之所以会有高度怎么适应这样的布局问题，可以怪到content-box头上。最终历史证明了border-box比较好用，现在大量的库已经改成border-box了，W3C也承认了错误。因此你可以放心使用，不要觉得是被淘汰的东西不敢用。

4.上面部分position:fixed，下面部分给个padding。主要在手机上用，因为有个大大的好处就是可以使用原生的滚动条。手机的DIV是不显示滚动条的，用这种方法使用原生的滚动条性能好。不好处是只能在全局使用，不能在内部DIV使用。

5.top+bottom不如border-box。有些人使用top+bottom是因为content-box习惯了，没想到还能border-box。或者在推广content-box，淘汰border-box的时代的库。

6.用javascript可以避免一下兼容问题完全自己动手，代价是1.性能，2.开发起来麻烦。

7.用calc不如flex，calc兼容性很不好。用calc主要是初学者，专做业务的不是专做CSS的，直接百度“CSS如何实现百分比减固定值”来的答案。