div margin-bottom 占自己高度的一个比例？

Posted 2023-03-05

【中文标题】div margin-bottom 占自己高度的一个比例？

【英文标题】：Div margin-bottom of a proportion of its own height?

【发布时间】：2011-06-22 00:53:20

【问题描述】：

例如，我有一个高度为100px 的 div（我不知道高度，但假设我知道）。我想将margin-bottom 设置为百分比，所以25% 将是25px 假设之前的高度。但是，百分比似乎是文档，而不是元素：

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

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

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

【问题讨论】：

确认：jsfiddle.net/jghsF

@JCOC 其实百分比是根据页面宽度而不是高度...

哦好吧，那比我想象的还要糟糕！

这有帮助吗？ ***.com/questions/485827/…

我不认为这就是我要找的东西

【参考方案1】：

CSS3 解决方案怎么样：

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

【讨论】：

translateY 作为百分比似乎是指元素本身的高度，而不是其父元素的高度。

这个问题与父母无关。

你真是个天才！这应该是正确的答案

这不会像 margin 那样影响周围的元素。所以它有点像相对位置。我可以使用影响周围元素的变换吗？

很好的答案。无法忍受人们使用 JS 来解决 CSS 应该解决的所有布局问题。

【参考方案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 来完成。

EDIT 2 - em 正在关闭字体大小，而不是计算出的盒子模型大小。所以它不会起作用。

EDIT 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 更新边距，但这需要太多代码）

谁说文字换行会改变高度？

我认为从依赖于宽度的计算中推导出元素的高度是行不通的（正如 Sime Vidas 在引用文档时指出的那样）。如果您可以发布使用 html 和 css 的示例，这可能有助于根据您的特定需求制定解决方案。顺便说一句，我个人认为 margin-top 和 margin-bottom 依赖于包含宽度是愚蠢的。 :\

哎呀，没关系。 em 是关闭字体大小，而不是边距，所以当我更新高度时，它仍然给出相同的边距高度。

使用 EM 是您的想法，所以如果您更新您的答案以适合我刚刚发布的小提琴，我会将其标记为已接受。

【参考方案3】：

这个问题比我预期的要有趣得多（+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 是基于 its 父母，所包含元素的边距也应如此，给出以下 CSS：

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


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

JS Fiddle demo。这也失败了。

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

【讨论】：

谢谢！然而，JS 是我最后的手段，但您可能想查看我的问题的编辑，它可能会激发其他灵感！

没有JS解决方案，拜托！想想那些禁用 JavaScript 的人（有一些很好的理由禁用它）。

好吧，我的整个应用程序都依赖于 JS...:P

【参考方案4】：

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

百分比：指宽度 包含块

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

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

（尝试调整浏览器窗口的宽度，您会看到 margin-bottom 发生了变化）

【讨论】：

使用包装器（这将是解决方案）对我来说并不是一个真正的选择。那么，有没有其他方法可以做到这一点？

@JCOC 我不能确定，可能有 CSS3 解决方案。此外，JavaScript（显然）。