logo标签列表

一个div的margin-bottom可以设置为其自身高度的比例吗？

css
30
例如，我有一个高度为100px的div（我不知道它的高度，但假设我知道）。我想将margin-bottom设置为百分比，所以如果先前高度为基础，则25％应该是25px。然而，百分比似乎是相对于整个文档而不是元素：
<div style="height:100px;margin-bottom:100%"></div>

这个边距应该是100px，但实际上它是页面高度的100%。

该元素只是一行没有背景的文本，因此理论上使用height:150%也可以起作用。

1
确认：http://jsfiddle.net/jghsF/ - Šime Vidas
2
@JCOC 实际上，百分比是基于页面宽度而不是高度的... - Šime Vidas
哦，那比我想象的更糟糕！ - JCOC611
这有用吗？https://dev59.com/kHRB5IYBdhLWcg3w3K4J - Jared Farrish
我不认为那是我要找的。 - JCOC611
4个回答
51

如何使用CSS3来解决：

div {        
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}
1
translateY以百分比的形式似乎是指元素本身的高度，而不是其父元素的高度。 - Bugalugs Nash
7
这个问题并不涉及到家长。 - ShibbyUK
2
你是个天才！这应该是正确的答案。 - mamashare
9
然而，这并不像margin一样会影响周围的元素。所以它有点像相对定位。我能使用一个会影响周围元素的transform吗？ - Björn
很棒的回答。无法忍受那些使用JS来解决CSS应该解决的所有布局问题的人。 - Vincent Chan
@mamashare 不是的，translate 只是移动元素，占用的空间并没有被释放。因此，它不是 margin 属性的适当替代品。 - muzzletov
6
使用包装器（这将是解决方案）对我来说并不是一个真正的选择。那么，还有其他方法可以做到这一点吗？ - JCOC611
@JCOC 我不能确定，可能有CSS3的解决方案。当然还有JavaScript。 - Šime Vidas
5

正如其他人所指出的那样，我不知道你是否可以使用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
}
问题在于高度会经常变化，所以我希望有一个CSS的解决方案。（当然我可以用JavaScript更新边距，但那需要太多代码） - JCOC611
1
谁说高度会随着文本换行而改变？ - JCOC611
我认为从依赖于宽度的计算中推导元素高度是行不通的（正如Sime Vidas在他引用文档时指出的那样）。如果您能够发布一个包含HTML和CSS的使用示例，那可能有助于根据您特定的需求设想解决方案。顺便说一句，我个人认为margin-top和margin-bottom依赖于包含宽度是很愚蠢的。:\ - Jared Farrish
面向对象编程，算了。em是根据字体大小进行调整的，而不是边距，因此当我更新高度时，它仍然给出了相同的边距高度。 - Jared Farrish
这是你使用EM的想法，所以如果你更新你的答案来适应我刚发布的要求，我会将其标记为已接受。 - JCOC611
显示剩余3条评论
1

这个问题比我预期的要有趣得多（+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解决。

谢谢！JS是我的最后选择，但你可能想看一下我问题的编辑，它可能会激发其他的灵感！ - JCOC611
请不要提供JS解决方案！考虑那些禁用JavaScript的用户（他们有一些很好的理由）。 - anroesti
好的，我的整个应用程序都依赖于JS... :P - JCOC611
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接