资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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如何实现子元素跟父元素的高度一致

完整代码:




	
	子元素高度与父元素一致
	


	
		
			左侧 left 不定高,parent的高度随着左侧left 的高度变化而变化,右侧也跟着变
		
		
			right的子元素,高度为1024px,会撑破容器,给.right加上 overflow:auto 就防止溢出了
		
	

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


文章名称:CSS如何实现子元素跟父元素的高度一致
转载注明:http://www.cdkjz.cn/article/jeijop.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220