html - div-Block 高度取决于里面的内容

Question

各位!当它内部的表单高度变得更多时，我遇到了更改 block 高度的问题(也许它只是看起来像这样，不知道)。我在 http://jsfiddle.net/vXNCD 上的 sample

也许我遇到了这个问题，因为我给 form 使用了 position

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

如果是这样，如何正确定位？如何让我的 #content 覆盖所有 inputs ？

Answer 1

如果你想让你的表单稍微越位，在父元素中使用填充而不是相对位置。

这是 fiddle :http://jsfiddle.net/vXNCD/13/

我所做的是删除相对位置并向#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;
}