一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS让子元素div高度填满父容器的剩余空间方法代码

时间:2022-06-25 13:57:52 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下CSS让子元素div高度填满父容器的剩余空间方法代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。

1.使用浮动的方式

效果图:

代码如下:(注意,此时.content的高度是500px,即父元素的高度,但是浮动元素在 .content 上方,盖住了 .content,将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果)



	
		
		高度充满父容器
	
	
	
		
自适应父容器, 充满剩余的空间

2.使用定位

代码如下:(推荐使用此种方法,没有上面的那种方法的缺点)



	
		
		高度充满父容器
	
	
	
		
自适应父容器, 充满剩余的空间

热门栏目