CSS如何实现子元素跟父元素的高度一致

这篇文章主要为大家展示了CSS如何实现子元素跟父元素的高度一致，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“CSS如何实现子元素跟父元素的高度一致”这篇文章吧。

站在用户的角度思考问题，与客户深入沟通，找到南湖网站设计与南湖网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、网站设计、外贸网站建设、企业官网、英文网站、手机端网站、网站推广、主机域名、网页空间、企业邮箱。业务覆盖南湖地区。

绝对定位方法：

（1）将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化

.parent {
	/*关键代码*/
	position: relative;
	
	/*其他样式*/
	width: 800px;
	color: #fff;
	font-family: "Microsoft Yahei";
	text-align: center;
}

（2）左边一个元素有个最小高度的情况

.left {
	min-height: 700px;
	width: 600px;
}

（3）右边元素要想跟父元素的高度是一致，那么可以用绝对定位这样设置，如果不想同时写top和bottom，写一个时，再写上height:100%,也可以达到一样的效果

.right {
	/*关键代码*/
	width: 200px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	
	/*其他样式*/
	background: #ccc;
	
}

（4）完整例子代码：




	
	子元素高度与父元素一致
	


	
		
			左侧 left 不定高,parent的高度随着左侧left 的高度变化而变化，右侧也跟着变

这边的高度跟父元素高度一致

（5）效果

CSS如何实现子元素跟父元素的高度一致

（6）问题来了：

如果右侧的子元素高度超出了.parent，怎么办？

.right-inner {
	background: limegreen;
	height: 1024px;
}


	right的子元素，高度为1024px，会撑破容器，给.right加上 overflow:auto 就防止溢出了

以上就是关于“CSS如何实现子元素跟父元素的高度一致”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注创新互联行业资讯频道。