web前端开发中，如果要将html文档中的子元素的某一属性值，比如将高度通过height:100%的CSS样式的方法设置得与父元素的高度相同，这通常是设计响应式web页面的好方法，可是“有时候”会没有效果？这是为什么呢？
出现这种情况的可能原因大概有两个（下面以高度属性值为例子）：
-
并没有显式地设置父元素的高度（或未显式地设置好最高父元素的高度）：这种显式地设置高度的方法一般是设置具体的高度，比如使用px为单位；
-
并没有逐级继承父元素的高度：html文档中，一个元素可能是另一个元素的子元素的子元素，而通过100%设置的属性值通常是继承直接父元素的，因此一般需要进行逐级继承。
例子：
下面的实例代码中，设置了d2和d3的height分别为50%，d2继承自d1，d3则继承自d2，如果将d2的css属性注释掉，那么d3将不会被浏览器渲染出高度：
<div class="d1" style="background-color:gold;height:100px;width:200px">
<div class="d2" style="background-color:green;width:200px">
<div class="d3" style="background-color:orange;width:200px"></div>
</div>
</div>
<style>
.d2{height:50%} /*可以将其注释，然后重新运行试试*/
.d3{height:50%}
</style>当然，具体的问题还需要具体的分析。
原文：CSS3子元素属性设置100%为什么没有效果
免责声明：内容仅供参考，不保证正确性！
