100px
的div(我不知道它的高度,但假设我知道)。我想将margin-bottom
设置为百分比,所以如果先前高度为基础,则25%
应该是25px
。然而,百分比似乎是相对于整个文档而不是元素:<div style="height:100px;margin-bottom:100%"></div>
这个边距应该是100px
,但实际上它是页面高度的100%。
该元素只是一行没有背景的文本,因此理论上使用height:150%
也可以起作用。
100px
的div(我不知道它的高度,但假设我知道)。我想将margin-bottom
设置为百分比,所以如果先前高度为基础,则25%
应该是25px
。然而,百分比似乎是相对于整个文档而不是元素:<div style="height:100px;margin-bottom:100%"></div>
这个边距应该是100px
,但实际上它是页面高度的100%。
该元素只是一行没有背景的文本,因此理论上使用height:150%
也可以起作用。
如何使用CSS3来解决:
div {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
http://www.w3.org/TR/CSS21/box.html#margin-properties
百分比:参考包含块的宽度
如果您的DIV在BODY元素中,则包含块是BODY元素,因此百分比将基于BODY宽度 - 在大多数情况下与视口宽度相同。
演示:http://jsfiddle.net/jghsF/1/
(尝试调整浏览器窗口的宽度,您会发现margin-bottom会改变)
正如其他人所指出的那样,我不知道你是否可以使用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
}
这个问题比我预期的要有趣得多(+1)。
我正在使用以下HTML结构:
<div id="someContent">
<p>Lorem ipsum.</p>
</div>
最初我尝试使用填充来模拟“边框”(JS Fiddle演示):
#someContent {
background-color: #000;
border-radius: 1em;
padding: 10%;
}
p {
background-color: #fff;
}
这是基于元素本身的高度来推导padding
,结果证明这是一个错误的假设。
在这个显然失败的尝试之后,我尝试在包含的元素上使用margin
,基于这样的假设:如果包含元素的margin
是基于它的父元素的,那么包含元素的margin
也应该如此,给出以下CSS:
#someContent {
background-color: #000;
border-radius: 1em;
}
p {
margin: 10%;
background-color: #fff;
}
JS Fiddle演示。但是这也失败了。
我怀疑如果不为父元素定义height
可能是不可能的,这可能需要使用JavaScript解决。