html css百分比效果,css百分比不起作用是什么原因？

CSS 的单位对于 CSS 的值有是一个直接影响的。因为 CSS 的单位直接对 CSS 的值的计算是有直接影响的，但有时我们设置百分比值时会出现不起作用的情况，这是什么原因呢？我们该如何解决呢？

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

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

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

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

css设置div百分比高度无效示例：

div高度

*{margin:0;padding:0}

.nav{

width:200px;

height:100%;

background-color:#c7c7c7;

}

divdivdiv

div设置百分比高度无效：

解决方法：

给外层设置高度为：100%

div高度

*{margin:0;padding:0}

.nav{

width:200px;

height:100%;

background-color:#c7c7c7;

}

divdivdiv

效果如下：