这篇文章主要讲解了“如何解决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高度设置百分比不生效的问题这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
