所以我正忙於製作一個水平滾動網站。容器div我們會說有一類area。它的寬度是可變的，以同樣的方式，在傳統網站上，平均高度可能會有所不同。填充/保證金百分比 - 可能的CSS錯誤？
我的網站是「垂直響應」，所以我使用了很多百分比值，包括高度，這與您在常規網站上使用百分比寬度的方式相同。
問題是，當我在我的div.area上使用百分比填充/邊距時，它會根據div的寬度而不是高度計算百分比，即使設置爲padding-top。
這類似於試圖在普通網站的body上設置padding-left的百分比，並根據網站的高度計算填充。這是瘋狂的，完全不直觀。
這是一個已知的問題？或者是故意的？有沒有任何CSS只有變通方法。我不希望有使用JS什麼來解決這樣我寧願只設置填充在em小號
的W3C標準的東西決定了對paddings和margins任何百分比是元素的寬度的百分比，不是高度：
該百分比是相對於生成的框的包含塊的寬度計算的。請注意， 'margin-top'和'margin-bottom'也是如此。如果包含塊的寬度取決於此元素，則生成的佈局在CSS 2.1中未定義爲 。
然而，top和bottom位置由容器的高度決定的，雖然;）沒有單隻CSS的方式做到這一點，但如果你願意在一些JS扔，這是完全可能的。
，我能想到的（非詳盡的列表）的一些解決方案：
排量從頂部由50％（僅CSS），然後由負上邊距偏移量爲元素的自己的一半高度（基於JS-計算）
計算的頂部和底部內邊距/利潤率由JS確定容器高度
只是偶然發現了同樣的問題之後。解決方案，爲我的作品：
不設置寬度/高度和使用
.percent10 {
top: 10%;
left: 10%;
bottom: 10%;
right: 10%;
}