Question

例如，我有一个高度为100px的div（我不知道高度，但假设我这样做了）。我想将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

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

百分比：指宽度包含块

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

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

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

Answer 3

正如其他人所说，我不知道你可以使用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 4

如果不将另一个HTML元素包装在要应用边距的范围内，则无法使用CSS 2执行此操作。

需要的HTML：

<div id="wrapper">
    <div>Text</div>
</div>

CSS：

#wrapper>div {
    height: 100%;
    margin-bottom: 150%; /* example */
}

然而，在 CSS 3 中，您可能需要尝试大小调整。尝试以下操作（我还没有尝试过，但可能工作）：

div {
    box-sizing: margin-box;
    margin-bottom: 150%;
}

请注意，并非所有浏览器都支持CSS 3.

Answer 5

这个问题比我预期的更令人着迷（ +1 ）。

我正在使用以下html结构：

<div id="someContent">
    <p>Lorem ipsum.</p>
</div>

最初我尝试使用填充来模拟'边框'（JS Fiddle demo）：

#someContent {
    background-color: #000;
    border-radius: 1em;
    padding: 10%;
}

p {
    background-color: #fff;
}

这假设padding将从元素本身的高度导出，结果是错误的 - 消耗。

之后显然失败了，我试图在包含的元素上使用边距，假设包含元素的margin基于其父母，所包含元素的边距也应如此，给出以下CSS：

#someContent {
    background-color: #000;
    border-radius: 1em;
}

p {
    margin: 10%;
    background-color: #fff;
}

JS Fiddle demo。这也失败了。

我怀疑如果没有为父元素定义height就不可能，这可能需要JS解决方案。

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

5 个答案: