大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

如何解决css高度设置百分比不生效的问题

这篇文章主要讲解了“如何解决css高度设置百分比不生效的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决css高度设置百分比不生效的问题”吧!

创新互联建站专业为企业提供永靖网站建设、永靖做网站、永靖网站设计、永靖网站制作等企业网站建设、网页设计与制作、永靖企业网站模板建站服务,十载永靖做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

不生效的原因:其父元素没有确定高度,则无法有效使用“height:XX%”的样式。解决方法:给父元素使用height属性设置一个确定的高度,这样子元素高度设置百分比就可以生效。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

当我们给块级元素设置响应式高度的时候,例如给div设置height:50%,往往没能看到效果。

原因是百分比的大小是相对其父级元素宽高的大小,如最外层元素设置的百分比是对应屏幕而言的。

需要了解的是对于宽度来说,其父级元素无须确定宽度就能设置百分比

但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height:XX%的样式!!!

看完上面一段话,我尝试加body{heigh:100%},然而并没有什么鸟用…………

让我们仔细想一想~~~,body的父级元素的高度定下来了麽??????并没有啊~~所以还是没有效果

所以我们还要对html元素设置高度!!或者在*{}中设置高度百分比

代码如下

*{
	margin:0px;
	padding: 0px;
}
html,body{
	margin: 0px;
	background:url(../img/body_bg.jpg) no-repeat 0 0;
	width:100%;
	height:100%;
}
.nav{
	width:100%;
	height:20%;
	border: 1px solid red;
}
.nav>img{
	width:100%;
	height: 100%;
}

感谢各位的阅读,以上就是“如何解决css高度设置百分比不生效的问题”的内容了,经过本文的学习后,相信大家对如何解决css高度设置百分比不生效的问题这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


文章名称:如何解决css高度设置百分比不生效的问题
文章地址:http://dzwzjz.com/article/jogddh.html
在线咨询
服务热线
服务热线:028-86922220
TOP