css - 根据内容调整嵌套 Div

Question

我的问题是嵌套的 div ('content') 没有根据实际内容调整他的高度，在本例中是我的表单。所以前一个 div 调整了他的高度，但后一个 div 没有这样做。我该如何解决这个问题？

HTML:

<div id='container'>
    <div class='content'>
        <form action="#" id="admin_form">
           <input type="text" class="input350" name="status" />
           <input type="text" class="input350" name="tlt" />
           <br>
           <input type="text" class="input350"  name="msg" />
           <input type="submit" class="input350" style="float:left;" value="Admin" />
        </form>
    </div>
</div>

CSS:

 #container
    {
        position: absolute;
        width: 900px;
        height: auto;
        border:solid 4px #1FC3D2;

    }

#container .content
    {
        position: relative;
        background-color: #EFEFEF;
        width: 898px;
        height:auto;
        border:solid 1px #000;
    }

Answer 1

表单的最后一个输入是 float 的。 float 元素不会拉伸(stretch)其父元素的高度。

将其添加到表单之后:

<div style="clear:both;"></div>