css高度设置百分比不生效怎么办
导读:收集整理的这篇文章主要介绍了css高度设置百分比不生效怎么办,觉得挺不错的,现在分享给大家,也给大家做个参考。不生效的原因:其父元素没有确定高度,则无法有效使用“height:XX%”的样式。解决方法:给父元素使用height属性设置一个确...
收集整理的这篇文章主要介绍了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高度设置百分比不生效怎么办的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css高度设置百分比不生效怎么办
本文地址: https://pptw.com/jishu/589495.html