CSS div margin-bottom 占自身高度的比例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4909724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div margin-bottom of a proportion of its own height?
提问by JCOC611
For example, I have a div that has a height of 100px(I don't know the height, but let's suppose I did). I want to set the margin-bottomto a percent, so 25%would be 25pxassuming the previous height. However, the percent seems to be of the document, not the element:
例如，我有一个高度为100px（我不知道高度，但假设我知道）的 div 。我想设置margin-bottom为百分比，所以25%将25px假设先前的高度。但是，百分比似乎是文档的，而不是元素的：
<div style="height:100px;margin-bottom:100%"></div>
The margin should be 100pxbut it isn't, it is 100% of the height of the page.
边距应该是100px但不是，它是页面高度的 100%。
The element is just a line of text that has no background, so using height:150%theoretically could also work.
该元素只是一行没有背景的文本，因此height:150%理论上使用也是可行的。
采纳答案by Jared Farrish
As others note, I don't know you can use CSS to do this. jQuery could help:
正如其他人所说，我不知道您可以使用 CSS 来做到这一点。jQuery 可以提供帮助：
http://jsfiddle.net/userdude/PZAvm/
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'));
});
EDIT- This could possibly be done using em's.
编辑- 这可能可以使用 em 来完成。
EDIT 2- em's are keying off font size, not a calculated box model size. So it won't work.
编辑 2- em 正在关闭字体大小，而不是计算出的框模型大小。所以它不会工作。
EDIT 3- JCOC611 was able to use the em approach after all.
编辑 3- 毕竟 JCOC611 能够使用 em 方法。
Original: http://jsfiddle.net/userdude/xN9V7/3/
原文：http: //jsfiddle.net/userdude/xN9V7/3/
JCOC611's Demo: http://jsfiddle.net/BCTg2/
JCOC611 的演示：http: //jsfiddle.net/BCTg2/
The code:
编码：
<div id="foo">
Foo
</div>
lol
div#foo {
background-color: #fcc;
margin-bottom: 1.5em;
font-size:20px
}
回答by ShibbyUK
How about a CSS3 solution:
CSS3 解决方案怎么样：
div {
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
回答by ?ime Vidas
http://www.w3.org/TR/CSS21/box.html#margin-properties
http://www.w3.org/TR/CSS21/box.html#margin-properties
Percentages: refer to width of containing block
百分比：指包含块的宽度
If your DIV is in the BODY element, then the containing block is the BODY element, so the percentage will be based on the BODY width - which is in most cases the same as the width of the viewport.
如果您的 DIV 在 BODY 元素中，那么包含块就是 BODY 元素，因此百分比将基于 BODY 宽度 - 在大多数情况下与视口的宽度相同。
Demo:http://jsfiddle.net/jghsF/1/
演示：http : //jsfiddle.net/jghsF/1/
(Try resizing the width of the browser window and you will see that the margin-bottom changes)
（尝试调整浏览器窗口的宽度，您会看到 margin-bottom 发生变化）
回答by David says reinstate Monica
This question is a great deal more fascinating than I'd expected (+1).
这个问题比我预期的要有趣得多（+1）。
I'm working with the following html structure:
我正在使用以下 html 结构：
<div id="someContent">
<p>Lorem ipsum.</p>
</div>
Originally I tried to use padding to simulate a 'border' (JS Fiddle demo):
最初我尝试使用填充来模拟“边框”（JS Fiddle 演示）：
#someContent {
background-color: #000;
border-radius: 1em;
padding: 10%;
}
p {
background-color: #fff;
}
This on the assumption that the paddingwould be derived from the height of the element itself, which turned out to be a wrong-assumption.
这是基于padding将来自元素本身的高度的假设，结果证明这是错误的假设。
After that clearly failed I tried to use a margin on the contained elements, on the assumption that if the marginof the containingelement is based on itsparents, so too should the margin of the contained element, giving the following CSS:
之后显然未能我试图用在包含元素的余量，这样的假设，如果margin在中含元素是根据其父母的，所以也应该被包含元素的边缘，给下面的CSS：
#someContent {
background-color: #000;
border-radius: 1em;
}
p {
margin: 10%;
background-color: #fff;
}
JS Fiddle demo. And this failed, too.
JS小提琴演示。这也失败了。
I suspect that it's impossible without defining a heightfor the parent element, which might require a JS solution.
我怀疑如果不height为父元素定义 a 是不可能的，这可能需要 JS 解决方案。
