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(“链接”div)未调整 - 它保留其原始高度。因此，页脚不会向下移动，控件会与它重叠。我该如何解决这个问题，以便调整此控件的大小会导致调整父 div 的大小并因此将页脚向下移动？

Answer 1

将内容放入具有 float 属性的 div 时，我总是在其内容末尾放置一个带有 clear:both 的 div 以确保适当调整大小。您已经有一个类 footer 可以执行此操作，如果仅此而已，请在此处使用它。例如:

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

如果您计划在 footer 上添加更多样式，您可能需要为此目的创建一个新类。