Div边缘 - 底部有一定比例的高度？

Question

例如,我有一个高度为的div 100px(我不知道高度,但假设我做了).我想设置margin-bottom为百分比,所以25%将25px假设先前的高度.但是,百分比似乎是文档,而不是元素:

<div style="height:100px;margin-bottom:100%"></div>

边距应该是100px但不是,它是页面高度的100%.

元素只是一行没有背景的文本,因此height:150%理论上使用也可以.

Answer 1

CSS3解决方案怎么样:

div {        
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

Answer 2

正如其他人所说,我不知道你可以使用CSS来做到这一点.jQuery可以帮助:

http://jsfiddle.net/userdude/PZAvm/

<div id="margin">Foo</div>

div#margin {
    background-color:red;
    height:100px;
}

$(document).ready(function(){
    alert($('#margin').height());
    var margin = $('#margin').height()/4;
    $('#margin').css('margin-bottom',margin);
    alert($('#margin').css('margin-bottom'));
});

编辑 - 这可能是使用em完成的.

编辑2 - em正在键入字体大小,而不是计算的盒子模型大小.所以它不会起作用.

编辑3 - JCOC611毕竟能够使用em方法.

原文:http://jsfiddle.net/userdude/xN9V7/3/

JCOC611的演示:http://jsfiddle.net/BCTg2/

代码:

<div id="foo">
    Foo
</div>
lol

div#foo {
    background-color: #fcc;
    margin-bottom: 1.5em;
    font-size:20px
}

Answer 3

http://www.w3.org/TR/CSS21/box.html#margin-properties

百分比:指包含块的宽度

如果您的DIV在BODY元素中,则包含的块是BODY元素,因此百分比将基于BODY宽度 - 在大多数情况下与视口的宽度相同.

演示: http ://jsfiddle.net/jghsF/1/

(尝试调整浏览器窗口的宽度,您会看到边距底部发生变化)