CSS/HTML：填充在％無厘頭

考慮以下HTMLCSS/HTML：填充在％無厘頭

<div id="parent"> 
    <div id="child"/> 
</div>

我已經給父母的100像素的高度。孩子的身高爲100％，填充物爲「10％0」。在CSS：

* { 
    box-sizing: border-box; 
} 
#parent { 
    height: 100px ; 
} 
#child { 
    height: 100%; 
    padding: 10% 0; 
}

或檢出this的jsfiddle。無論如何，從上面我會期望孩子div有一個10px的頂部/底部邊界（100px的10％）。但它是31.5px。有人可以解釋爲什麼發生這種情況，我怎麼能達到我想要的？

非常感謝！

來源

2013-11-27 Jeanluca Scaljeri

百分比是基於寬度：如果你這樣做，你會得到期望的結果。另外<div>不是自動關閉。

* { 
    box-sizing: border-box; 
} 
#parent { 
    height: 100px; 
    width : 100px; 
    background-color: green; 
} 
#child { 
    height: 100%; 
    padding: 10% 0%; 
    background-color: blue; 
}

來源

2013-11-27 20:51:52

好的，thnx。但在我的情況下，寬度可以是任何東西。我認爲在我的情況下唯一的解決方案是使用javascript –

Np，是的，我認爲JavaScript是現在的解決方案。 –

任何百分比值將使用元素的寬度進行計算。

來源

2013-11-27 20:49:09 Heinrich

+1同意。 [來自MDN文檔]（https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top）：「百分比指的是包含塊的寬度」。 – showdev

％基於元素的寬度而不是高度。

來源

2013-11-27 20:50:11 cooper667

CSS/HTML：填充在％無厘頭

回答

相關問題