文档章节

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

linsk1998
 linsk1998
发布于 01/23 18:42
字数 761
阅读 21
收藏 0

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

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

有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如何实现百分比减固定值”来的答案。

© 著作权归作者所有

共有 人打赏支持
linsk1998

linsk1998

粉丝 1
博文 19
码字总数 5839
作品 2
东城
私信 提问
【css】CSS实现div的全屏自适应显示

放置全屏地图时遇到的问题,解决方案如下: 方法一: 重点是要top和bottom一起使用,这是很反常规的用法,可以强制定义盒模型的区域。 还会出现滚动条,所以把溢出都设为hidden。 方法二: ...

混沌鸿蒙一老君
2017/08/30
0
0
无js实现div高度自适应布局

之前在项目发现写了好几行js就是为了控制div布局中的宽度和高度,让嵌套的iframe能够自动填满剩余的空间。这就让我很不爽了。因为我一直觉得这个工作应该交给css才对啊。于是尝试着不用js来完...

炼心咒
2016/10/13
15
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
0
0
布局神器(一)display:table-cell

display:table-cell 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就display:table-cell做学习总结...

即将离
2016/07/17
0
0
display:table-cell介绍

[图片上传失败...(image-2969e4-1516190383083)] 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就dis...

bug_killer
2018/01/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

matlab-自控原理 nichols 由开环传递函数画出奈奎斯曲线

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   code clearclcclosenu......

志成就
26分钟前
1
0
ABUSE建了个恶意网站数据库

数据库已经按不同类型标记了各种恶意网站,例如它们当前是否在线,恶意内容类型,潜在威胁信息等。安全软件开发人员和浏览器开发人员可以免费使用此数据库来帮助用户拦截可能存在威胁的恶意网...

linuxCool
今天
2
0
【SQL】- 高级用法

数值和字符范围比较: between select *from books where price>=23.5 and price<=35; -- 等价于select *from books where price between 23.5 and 35; -- between包含边界的比较>= / <=......

ZeroneLove
今天
8
0
RabbitMQ如何解决各种情况下丢数据的问题

1.生产者丢数据 如果想学习Java工程化、高性能及分布式、深入浅出。微服务、Spring,MyBatis,Netty源码分析的朋友可以加我的Java高级交流:854630135,群里有阿里大牛直播讲解技术,以及Jav...

编程SHA
今天
5
0
JVM平台上的响应式流(Reactive Streams)规范

Reactive Streams 响应式流是一个倡议,用来为具有非阻塞后压的异步流处理提供一个标准。大家努力的目标集中在运行时环境(JVM和JavaScript)和网络协议上。 注:响应式流其实就是一个规范,...

java菜分享
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部