超强-上下两个div上面值固定下面铺满高度

实现的功能为:
界面2个大的div
最上面的固定高度
底下的需要自动 铺满

直接贴代码和效果图:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>超强-上下两个div上面值固定下面铺满高度</title>
	<style type="text/css">
	 
		* {
    
    
			margin: 0;
			padding: 0;
		}

		.parentDiv {
    
    
			width: 100%;
			height: 100%; 
			position: absolute;
			display: flex;
			flex-direction: column; 
		} 
		.childDiv1 {
    
    
			background-color: blue;
			width: 100%;
			height: 200px;
		}

		.childDiv2 {
    
    
			background-color: red;
			width: 100%;
			flex: 1;
		}
	</style>
</head>

<body>
	<div class="parentDiv">
		<div class="childDiv1">1111</div>
		<div class="childDiv2">
	 2222 
		</div>
	</div>
</body>

</html>

在这里插入图片描述在这里插入图片描述
当底侧发生高度变化的时候自动铺满,不足的自动铺满,超过了的按照实际的高度

猜你喜欢

转载自blog.csdn.net/milijiangjun/article/details/108221773
今日推荐