如果％height基於父寬度，那麼爲什麼div在頁面變寬時變短？

根據許多消息來源，div的高度（如果以百分比形式給出）被確定爲其父公司的寬度的百分比。那麼爲什麼如果調整窗口的大小以使其水平變小，窗口的內容也不會垂直變小？如果％height基於父寬度，那麼爲什麼div在頁面變寬時變短？

您正在使用哪種瀏覽器？ – stackErr

Firefox版本28. –

這是不真實的。當你嘗試使用percentage-based top/bottom margins and /or paddings時，這個小噱頭只會發生。身高計算爲含母公司自己計算出的高度的百分比 - 見這裏的例子：http://jsfiddle.net/teddyrised/gB65X/

比方說，我們有標記：

<div> 
    <img src="http://placehold.it/500x500" /> 
</div>

和下面的CSS：

body { 
    height: 500px; 
} 
div { 
    overflow: hidden; 
    height: 75%; 
} 
div img { 
    display: block; 
}

<div>會，默認行爲，伸展到父母的全部高度（100％= 500px）。但是由於我們將其高度限制爲75％，因此它的最終計算高度爲375px。

現在你設置的<div>至10％的填充：http://jsfiddle.net/teddyrised/gB65X/1/

你可以看到，填充，奇怪的是，沿兩個軸相等，這不應該是這樣。如果您檢查了檢查員，即使包裝母版<body>的高度和寬度不相同，也可以看到頂部/底部的計算填充與左側/右側的填充相同。

事實上，這種行爲通常利用無需使用JS創造完美平方CSS元素：http://jsfiddle.net/teddyrised/gB65X/2/如果我們做了以下修改原來的小提琴：

div { 
    overflow: hidden; 
    padding-bottom: 50%; 
    height: 0; 
    width: 50%; 
}

你可以看到， <div>已經實際上變成了靈活/負責的方形，其尺寸僅取決於視口寬度而不取決於高度;）

2014-04-24 19:00:01 Terry

@AmadeusDrZaius對不起，在手機上。是的，錯過了這個詞。將盡快編輯！ – Terry

所以你說一個元素不會繼承它的高度作爲其父寬度的百分比？只是保證金和填充值？編輯：Nvm，感謝您的鏈接。 –

只有**基於百分比的垂直**邊距和填充值將根據元素自身的寬度進行計算。 – Terry

height: 75%  /* <percentage> values */ 

<percentage> 
    Specified as a <percentage> of containing block's height.

所以你的身高是相對於父母的身高。

我想你可能會考慮padding和margin百分比。

2014-04-24 19:05:24

謝謝。是的，我混淆了它。 –

回答