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


本文摘自PHP中文网,作者青灯夜游,侵删。

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

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

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

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

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

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

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

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

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

阅读剩余部分

相关阅读 >>

如何解决webpack css url报错问题

css怎么设置粘性定位

css中设置英文单词之间间距的属性是什么

html怎么调用css文件

css sprite如何使用

css的工作过程介绍(图文)

css类选择符用什么表示?

style标签的作用是什么

你所不知道的css规则,值得收藏!!

你可能还不知道的7个惊人的css属性!

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...