CSS 90% 与嵌套时计算的 90% 不同

Question

我遇到了这个，但在任何地方都找不到解释。

对于所有元素，padding 和 margin 都设置为 0。

CSS
---------
#mygrandparentdiv {
  height: 213px;
}
#myparentdiv {
  height: 90%;
}
#mydiv {
  height: 90%;
}
---------
HTML
---------
<div id='mygrandparentdiv'>
  <div id='myparentdiv'>
    <div id='mydiv'>Something here</div>
  </div>
</div>

如果我去开发者工具检查元素，myparentdiv 的高度是 mygrandparentdiv 的 90%，即 191.7px，但是 mydiv 是 157.217px(myparentdiv 的 82%)而不是 172.53px(myparentdiv 的 90%) ).

为什么会这样？

Answer 1

height:90%;

将是 parent 的

http://jsfiddle.net/9QD7f/1/

我添加了更多的 div 并为它们设置了背景色。正如您所看到的，每个看起来都变得不同了，那是因为 90% 的越来越小的 div 不会在底部给你一个统一的“条纹”。

检查它，数学检查出来了。每个 div 都是其直接父级的 90%。