父级自适应，子级跟随父级高度

sliubuer

已于 2023-12-28 10:11:20 修改

阅读量1.7k

点赞数 1

文章标签： css html 前端

于 2023-06-21 17:25:41 首次发布

本文链接：https://blog.csdn.net/u011546682/article/details/131331746

版权

当父级的高度自适应的时候，一直找不到方法，设置子级元素和父级一样的高度。无意中发现，设置父级为flex，在需要跟随父级高度的子级外再加上一层div，设置子级的div height为100%，可以实现跟随父级高度。

例如下面这个例子。
父级（div3）的高度由div1撑开，想要div2高度自动设置为div3的高度，可以在div2外层加上一个div，然后设置div3的display为flex，div2的height设置为100%，这样就可以实现div2的高度和div3的高度一致了。

<body>
	<div class="div3">
		<div class="div1"></div>
		<div>
			<div class="div2"></div>
		</div>
	</div>
</body>
<style>
	.div1 {
		height: 300px;
		width: 50px;
		background-color: red;
		display: inline-block;
	}
	.div2 {
		width: 50px;
		background-color: blue;
		height: 100%;
		display: inline-block;
	}
	.div3 {
		display: flex;

	}
</style>