css中父元素没有高度，子元素高度填满

最新推荐文章于 2024-04-29 14:21:45 发布

koguo

最新推荐文章于 2024-04-29 14:21:45 发布

阅读量5.2k

点赞数 4

分类专栏：前端印象文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_42858057/article/details/124796135

版权

前端印象专栏收录该内容

17 篇文章 3 订阅

订阅专栏

一、问题：

如下代码，父元素father使用flex布局，不设高度，子元素son2高度设置为200px，子元素son2撑开了父元素father，son1无法填满父级元素高度。

<body>
	<div class="father">
		<div class="son1">这是子元素son1</div>
		<div class="son2">这是子元素son2</div>
	</div>
</body>
<style>
	.father{
		display:flex;
		justify-content:space-between;
	}
	.son1{
		
	}
	.son2{
		height:200px;
	}
</style>

二、方法：

要使子元素son1高度填满整个父元素father的高度，就要做一下改变

<body>
	<div class="father">
		<div class="son1">这是子元素son1</div>
		<div class="son2">这是子元素son2</div>
	</div>
</body>
<style>
	.father{
		display:flex;
		justify-content:space-between;
		align-items:stretch;//改变
	}
	.son1{
		height:inherit;//改变
		display: flex;//改变，为了使文字上下居中
        align-items: center;//改变，为了使文字上下居中
        justify-content: center;//改变，为了使文字上下居中
	}
	.son2{
		height:200px;	
	}
</style>

三、总结：

align-items: stretch;属性让当前元素拉升至父级元素的高度或者宽度
height:inherit；属性继承父元素的高度
display: flex;align-items: center;justify-content: center;让文本节点上下居中

koguo

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
css中父元素没有高度，子元素高度填满

一、问题：如下代码，父元素father使用flex布局，不设高度，子元素son2高度设置为200px，子元素son2撑开了父元素father，son1无法填满父级元素高度。<body> <div class="father"> <div class="son1">这是子元素son1</div> <div class="son2">这是子元素son2</div> </div></body>&lt
复制链接

扫一扫