要素にウィンドウの高さの 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;
}