css高度设置百分比不生效怎么办

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

本教程操作环境：windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

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

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

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

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

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

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

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

代码如下

*{
	m arg in:0px;
	padding: 0px;
}
html,body{
	mar gin : 0px;
	background:url( .. / img /body_bg. jpg ) no-re PE at 0 0;
	width:100%;
	height:100%;
}
.nav{
	width:100%;
	height:20%;
	border: 1px solid  red ;
}
.nav>img{
	width:100%;
	height: 100%;
}

更多编程相关知识，请访问：编程视频！！

以上就是css高度设置百分比不生效怎么办的详细内容，更多请关注其它相关 文章 ！

总结

以上是 为你收集整理的 css高度设置百分比不生效怎么办 全部内容，希望文章能够帮你解决 css高度设置百分比不生效怎么办 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于css高度设置百分比不生效怎么办的详细内容...