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

Question

我遇到过这个，无法在任何地方找到解释。

对于所有元素，填充和边距设置为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%;

将是父母

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

我添加了几个div并给它们背景颜色。你可以看到每一个看起来都有不同的尺寸，因为90％的较小和较小的div不会在底部给你一个统一的“条纹”。

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

Answer 2

最后我意识到导致高度萎缩的原因。这都是因为滚动条。

我已经设置了jsfiddle（http://jsfiddle.net/9QD7f/2/）。因此，您可以比较顶部组和底部组，其中顶部组的div数量为#mydiv，而第二个组只有一个。

感谢Hurda提醒我jsfiddle。