Question

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

如果我想使用百分比在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

高度不一定按视口的整个高度计算，它由定义的witdth计算。如果#wrap嵌套在#container内并按如下方式定义：

#container{
height: 1000px;
width: 200px;
}

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

然后通过将包裹高度声明为100％我的1000px（即1000px）的100％，然而50％的宽度是200px（100px）的50％。虽然如果它没有嵌套，那么它仍然是由＆＃34;定义的宽度＆＃34;除非另有说明，否则默认设置为整个浏览器窗口。

是的，同样的规则适用于所有其他元素，并根据父级的高度和宽度计算。

对于视口等，并将其调整为浏览器窗口的完整大小，我建议您在Make div 100% height of browser window上查看James的这篇文章。他深入研究了视口如何工作以及它们优于正常的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/

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