CSS3 width and height ratio

Question

所以，我对此感到困惑，然后意识到我实际上不知道应该在谷歌中键入什么作为查询，所以我会得到答案：

如果我想在CSS3中使用百分比定义高度和宽度，例如：

#wrap{
  width: 100%;
  height: 250%;
}

高度是根据观察端口的全高计算的，还是根据定义的宽度计算的（就好像-设置的宽度变成了所有东西的基础值）？例如：

width = 1000px
height = 1200px

然后是：

width = 100% <=> width = 1000px
height = 250% <=> height = 2.5 * 1200px = 3000px

或者是：

width = 100% <=> width = 1000px
height = 250% <=> height = 2.5 * width = 2.5 * 1000px = 2500px

此外，同样的规则，无论是什么，是否也适用于所有其他元素？我是根据父母的身高计算身高，根据父母的宽度计算宽度，还是宽度变成了一切相关的100%？

Answer 1

高度不一定要计算到视图端口的全高，它是根据定义的宽度计算的。如果您在#container中嵌套了#wrap，并将其定义如下：

#container{
height: 1000px;
width: 200px;
}
#wrap{
height:100%;
width: 50%;
}

然后，通过将包装高度声明为100%，这是我的1000px（即1000px）的100%，然而50%的宽度是200px（100px）的50%。尽管如果它没有嵌套，那么它仍然是由"定义的宽度"计算的，默认情况下，该宽度设置为整个浏览器窗口，除非另有指定。

是的，相同的规则适用于所有其他图元，并根据父图元的高度和宽度进行计算。

对于视口等，并将其调整为浏览器窗口的完全大小，我建议查看James关于使div为浏览器窗口100%高度的这篇文章。他深入探讨了视口的工作方式及其相对于普通100%的优势

Answer 2

例如，如果您有以下内容：

<div id="outer">
<div id="inner"></div>
</div>

和这个css

#outer {
width: 1000px;
height: 1000px;
}
#inner {
width: 50%;  /* is 500 */
height: 200%; /* is 2000 */
}

这是一把有刻度的小提琴：http://jsfiddle.net/q6ux91x9/

如果不存在包含元素，则百分比系统与包含元素或文档/窗口相关。