Question

我试图将绝对定位元素的高度设置为80％，将其顶部和底部边距设置为10％，以便为元素提供80％的窗口高度，并在其上方和下方留出10％的空间，因为其他元素是出现在那里。

但是你可以在这个小提琴http://jsfiddle.net/qnLC2/中看到，并且正如W3C CSS Box-model规范中所提到的，所有边距的宽度实际上都设置为窗口宽度的10％（不是高度）（尝试调整大小）输出屏幕并使其更宽，以便看到效果。）

W3C CSS Box-model规范：

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?

CSS：将边距设置为窗口高度的10％

1 个答案: