CSS3子元素设置100%为什么没有效果

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%为什么没有效果

免责声明：内容仅供参考，不保证正确性！