CSS margin-top 让 div 超出了 parent 的高度

Question

我在设置布局时遇到问题，因为我的 child div 之一超出了 parent div.

我有：header 高度为 10%，容器高度为 90%，内部 'div1' 高度设置为 90%，margin-top 设置为 10%。如果我删除 margin-top 一切正常，否则它会超出 parent 大小创建卷轴等。（我想要 div1 高度设置，我不需要将高度设置为自动等）

JsFiddle：https://jsfiddle.net/5q9vh93n/

HTML:

<body>
    <div id="header">Header</div>
    <div id="container">
        <div id="div1">1</div>
        <div id="div2">2</div>
    </div>
</body>

CSS:

body, html
{
    color: white;
    margin: 0px;
    padding: 0px;
    height: 100%;
}
#header
{
    background-color: blue;
    height: 10%;
}
#container
{
    width: 100%;
    height: 90%;
    background-color: gray;
}
#div1 {
    background-color: red;
    float: left;
    width: 15.67%;
    margin-top: 10%;
    margin-left: 1.5%;
    height: 90%;
}
#div2 {
    background-color: green;
    float: right;
    width: 100px;
    width: 43.17%;
    margin-right: 3.6%;
}

Answer 1

这里使用Transform是demo

#div1 {
  background-color: red;
  float: left;
  width: 15.67%;
  transform: translateY(10%);
  margin-left: 1.5%;
  height: 90%;
}

Answer 2

您应该使用 position: absolute; 并将 margin-top 更改为 top，将 margin-left 更改为 left。所以#div的css如下：

#div1 {
    position: absolute;
    background-color: red;
    float: left;
    width: 15.67%;
    top: 10%;
    left: 1.5%;
    height: 90%;
}

Answer 3

当我发现这一点时我真的很惊讶，但是垂直填充和边距是相对于 parent 的宽度，而不是高度。

要解决您的问题，您可以使用 top 属性代替，如您所料，它是相对于 parent 的高度。

所以，只需将您的代码更改为这个，它就会起作用。

#div1 {
    top: 10%;
    position: relative;
}

JSFiddle：https://jsfiddle.net/5q9vh93n/2/

希望对您有所帮助！

CSS margin-top 让 div 超出了 parent 的高度

CSS margin-top makes div go out of parent's height

html

css

HTML:

CSS: