html - Div - margin-top 作为 div 内的百分比

Question

这没有按预期工作。我基本上希望 red div 位于距离 div 顶部 20% 的位置。这是行不通的。我提供了 JS Fiddle 和下面的代码。

HTML

<div id="container">


    <div id="inside"</div>

</div>

CSS

body, html {
    margin: 0 0;
    height: 100%;
}

#container {
    background: yellow;
    height: 60%;
    width: 100%;
}

#inside {
    background: red;
    height: 50%;
    margin-top: 20%;
    width: 100%;
}

JSFiddle - 实时预览 http://jsfiddle.net/ye947tjh/

Answer 1

如果您为边距设置了一个百分比值，它是根据元素的宽度计算的。

查看此处了解更多信息: Why are margin/padding percentages in CSS always calculated against width?