Html div块高度取决于内部内容

各位!！ 我遇到了一个问题，改变高度的块时，形式的高度在里面变得更大（也许它只是看起来像这样，不知道）。 我的样品

也许我有这个问题，因为我给了

form

using的位置

position: relative;
    left: 13em;
    top: 9em;

如果是这样，如何正确定位？

---

如何使我的

#内容

覆盖所有

输入

您应该在

#content>表单中添加
填充底部：9em
。该值应等于或大于
top:9em
。这样，您的表单将留在块内。看这个

或者更好，您应该使用
padding top:9em
而不是
top:9em
，这样就可以完全避免这个问题。看这个

元素的位置是相对的。使用填充来定位内容，而不是顶部和左侧

    #content > form {
    position: relative;
    padding: 40px 60px;
    }

如果您想将表单的位置稍微偏移一点，请在父元素中使用padding，而不是position relative

这是小提琴：

我所做的是删除相对位置，并将填充添加到#content div中，再加上添加的框大小，以确保填充被计算为宽度的一部分

#content
{
    width: 70%;
    min-height: 30em;
    background-color: rgba(62,96,111,0.9);
    position: relative;
    margin: 5em auto;

    -webkit-border-radius: 0.42em;
    -moz-border-radius: 0.42em;
    -o-border-radius: 0.42em;
    -ms-border-radius: 0.42em;
    border-radius: 0.42em;

    padding: 9em 13em;    

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

如果你只想把表格放在盒子里，我不明白你为什么要使用相对定位。只要把它取下来，你就没事了。然后，您可以使用边距将内容居中（如果您愿意）：0自动；在需要的地方


只是添加了一些填充物，让它看起来更好一些，有一些呼吸空间：），当然。删除了相对定位。
只需删除以下样式

内容>形式
{

}

您在这里所做的是根据内容调整表单（相对），然后更改左侧和顶部位置。
默认情况下，元素的位置是静态的。因此#内容将覆盖所有表单数据。
您正在设置
位置：相对
，它将该元素从页面流中取出
位置：绝对
将元素从流中取出…相对定位的元素相对于其正常位置进行定位position@Scott据我所知,，
position:relative
不会使元素脱离正常流程。谢谢，我认为这是在我的情况下解决问题的最佳决策glade我可以帮助：）
    #content > form {
    position: relative;
    padding: 40px 60px;
    }

#content
{
    width: 70%;
    min-height: 30em;
    background-color: rgba(62,96,111,0.9);
    position: relative;
    margin: 5em auto;

    -webkit-border-radius: 0.42em;
    -moz-border-radius: 0.42em;
    -o-border-radius: 0.42em;
    -ms-border-radius: 0.42em;
    border-radius: 0.42em;

    padding: 9em 13em;    

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#content
{
    width: 70%;
    min-height: 30em;
    background-color: rgba(62,96,111,0.9);
    margin: 5em auto;
    padding:1em;
}

position: relative;
left: 13em;
top: 9em;