CSS：將邊距設置爲窗口高度的10％

Question

我試圖將絕對定位元素的高度設置爲80％，並將其頂部和底部邊距設置爲10％，以便給出元素80％的窗口高度並離開其他元素將出現在那裏10％以上的空間。

但是，正如你可以在這個小提琴http://jsfiddle.net/qnLC2/中看到的那樣，並且如W3C CSS Box-model規範所述，所有邊距的寬度實際上都設置爲窗口寬度的10％（不是高度）（嘗試調整輸出屏幕的大小和使其更寬以查看效果）。

W3C CSS盒模型規格：

The percentage is calculated with respect to the width of the generated box's 
containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. 
If the containing block's width depends on this element, then the resulting layout is 
undefined in CSS 2.1. 

我想知道是否有任何CSS只解決這個問題的一種方法。

的代碼的jsfiddle： HTML：

<div></div> 

CSS：

div { 
min-width:20px;  
min-height:20px; 
background:blue; 
position:absolute; 
height:80%; 
width: 80%; 
margin:10%; 
} 
body{ 
background:red; 
} 

Answer 1

它似乎並不有什麼辦法只能用CSS來做到這一點。您將需要javascript爲它在這裏詳述： Can I set the height of a div based on a percentage-based width?