Bootstrap

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

当父级的高度自适应的时候,一直找不到方法,设置子级元素和父级一样的高度。无意中发现,设置父级为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>
;