0

我试图将绝对定位元素的高度设置为 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;   
}
4

1 回答 1

0

似乎没有任何方法可以仅使用 CSS 来实现。您将需要 javascript 来详细说明: 我可以根据基于百分比的宽度设置 div 的高度吗?

于 2012-11-21T14:45:19.943 回答