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


1.使用浮动的方式

效果图:

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

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

  <!DOCTYPE html>  <html>  	<head>  		<meta charset="utf-8" />  		<title>高度充满父容器</title>  	</head>  	<style>  		.parent {  			height: 500px;  			width: 300px;  			border: 1px solid red;/***/  			padding: 2px 2px;/***/  		}  		.nav {  			height: 100px;  			width: 100%;/*必须,沾满宽度防止浮动 */  			float: left;/*必须 */  			background-color: red;  		}  		.content {  			height:100%;/*必须*/  			background-color: green;  		}  	</style>  	<body>  		<div class="parent">  			<div class="nav">  				固定高度  			</div>  			<div class="content">  				自适应父容器, 充满剩余的空间   			</div>  		</div>  	</body>  </html>

2.使用定位

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

  <!DOCTYPE html>  <html>  	<head>  		<meta charset="utf-8" />  		<title>高度充满父容器</title>  	</head>  	<style>  		.parent {  			position: relative;  			height: 500px;  			width: 300px;  			border: 1px solid red;/***/  			padding: 2px 2px;/***/  		}  		.nav {  			height: 100px;  			width: 100%;  			background-color: red;  		}  		.content {  			position:absolute;  			top: 100px;  			bottom: 0px;  			background-color: green;  			width: 100%;  		}  	</style>  	<body>  		<div class="parent">  			<div class="nav">  				固定高度  			</div>  			<div class="content">  				自适应父容器, 充满剩余的空间   			</div>  		</div>  	</body>  </html>

到此这篇关于CSS让子元素div的高度填满父容器的剩余空间的方法的文章就介绍到这了,更多相关CSS子元素div高度填满剩余空间内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

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

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

登录后才能评论