不生效的原因：其父元素没有确定高度，则无法有效使用“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高度设置百分比不生效怎么办的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1620968.html
微信扫一扫 
支付宝扫一扫 
