• 技术文章 >web前端 >css教程

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

    青灯夜游青灯夜游2021-07-22 14:02:39原创87

    不生效的原因:其父元素没有确定高度,则无法有效使用“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高度设置百分比不生效怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么实现不透明度渐变 下一篇:怎么加载css文件
    VIP会员

    相关文章推荐

    • css3如何绘制半圆• css中边框阴影怎么写• css层级关系怎么设置• 8个值得了解的纯CSS布局排版技巧• 深入了解CSS中的选择器• css怎么实现多边形

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网