Question

我有问题设置布局，因为我的一个div div使得它离开了它的父div。

我有：高度为10％的标题，高度为90％的容器，以及高度设置为90％且margin-top设置为10％的“div1”内部。如果我删除margin-top一切都没问题，如果不是它超出了父级大小创建滚动等（我想设置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

此处使用转换为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

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

要解决您的问题，您可以使用top属性，而不是相对于父级的高度。

因此，只需将您的代码更改为此代码即可。

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

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

希望它有所帮助！

CSS margin-top使得div超出父亲的身高

HTML：

CSS：

3 个答案: