CSS:父div在其内部不会调整大小

Question

我有一个简单的CSS:

div.header
{
    width:auto;
}

div.footer
{
    clear:both;
}

div.middle
{
    margin:5px 0 5px 0;
}

div.links
{ 
    width:200px; 
    float:left;
}

div.content
{ 
    width: 900px;
    margin-left:210px;
}

和一个简单的页面:

    <div class="header">
       <!-- some control inside -->
    </div>
    <div class="middle">
       <!-- left navigation list -->
       <div class="links">
           <!-- some control inside -->
       </div>
       <!-- content place -->
       <div class="content">
            <asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
       </div>
    </div>
    <div class="footer">
       <!-- some control inside -->
    </div>

置于"链接"div内的控件有时会被javascript调整大小.控件调整大小,但父div("links"div)不是 - 它保留其原始高度.结果,页脚不向下移动,控件与其重叠.我如何解决此问题,以便调整此控件的大小将导致调整父div的大小,从而导致页脚向下移动？

Answer 1

将内容放入带有float属性的div时,我总是clear:both在其内容的末尾放置一个div,以确保正确调整大小.你已经有了一个footer这样做的课程,如果这是它的全部,那么在这里使用它.,例如:

   <div class="links">
       <!-- some control inside -->
       <div class="footer"></div>
   </div>

如果您打算使用更多样式,footer可能需要为此目的创建一个新类.