网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

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://bjjierui.cn/article/jeijop.html

其他资讯