Question

我有一个<div> 100px高（出于演示目的）在<div>内部是另一个60%高，其中margin-top为20%。我希望结果为60px高<div>，margin-top为20px。

不幸的是，事实并非如此，我无法想出这一点。

这是CSS：

html, body {
     min-height:100%;
}
div#one {
     height:100px;
}
div#two {
    background:red;
    height:60%;
    margin-top:20%;
    margin-bottom:0;
    width:100%;
}

HTML：

<html>
    <body>
        <div id="one">
            <div id="two">
                &nbsp;
            </div>
        </div>
    </body>
</html>

这是一个jsFiddle。

感谢。

Answer 1

使用relative职位尝试this fiddle。

div#one {
    background-color:green;
    height:100px;
    width: 100%;
}

div#two {
    float: left;
    position: realtive;
    background:red;
    height:60%;
    width: 100%;
    margin-top: 2.5%;
}

Answer 2

http://jsfiddle.net/HpaQp/5/

html, body {
    margin: 0px;
    padding: 0px;
}
div#one {
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}

Answer 3

边距/填充属性的百分比值始终相对于包含块的宽度，即使在margin-top和margin-bottom的情况下 - 来自2.1 Spec：

<强>保证金

<percentage>：百分比是根据生成的框的包含块的宽度计算的。 请注意，对于'margin-top'和'margin-bottom'也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

Answer 4

html, body {
    min-height: 100px;
}

div#one {
    height: 100px;
}

div#two {
    background: red;
    height: 60px;
    margin-top: 20px;
    margin-bottom: 0;
    width: 100%;
}

http://jsfiddle.net/HpaQp/1/

Answer 5

如果您查看http://www.w3.org/TR/CSS2/box.html#propdef-margin-top处的规格，您会注意到

百分比：指包含块的宽度

所以在你的情况下，20％适用于#two意味着#one宽度的20％

边距：百分比;没有父母身高？

5 个答案: