CSS3寬高比

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％。 盡管如果未嵌套，則除非另有說明，否則它仍由默認情況下設置為整個瀏覽器窗口的“定義的寬度”來計算。

是的，相同規則適用於所有其他元素，並根據父元素的高度和寬度進行計算。

對於視口等，並將其調整為瀏覽器窗口的完整大小，我建議您查看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/

如果不存在包含元素，則百分比系統相對於包含元素或文檔/窗口起作用。