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>

放置在“links”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上设置更多样式，则可能需要为此目的创建一个新类。

Answer 2

我认为有两种方法可以解决这个问题：

.middle溢出：
```
.middle {
    overflow: hidden;
}
```
将您的页脚（或其他div clear:both）置于中间，其他两个div之后

Answer 3

http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html

这是一篇关于浮动div没有扩展其父div的文章

Answer 4

您可以获取页脚div的高度，然后减去链接div的重新大小，并将差异设置为该页脚div的新高度。在jquery中，这可能是：

$("#links").click(function() {

     var footer-height = $("#footer").css("height");
     var links-height = $("#links").css("height");
     var links_resize = ...code to determine how much to resize links div ....

     $("#footer").css("height, " footer-height - links_resize);

     $("#links").css("height, " links-height + links_resize);

});

Answer 5

尝试将'float：left'添加到父div，看看是否修复了它。浮动的父母将包含漂浮的孩子，但父母永远不会扩大只是为了包含漂浮的元素。

Answer 6

也许IE8应该解决这个问题，但它没有修复。以该文章中的代码为例

<style>
.container
{
   width:300px;
   background-color:green;
}
.box
{
   float:left;
   width:100px;
   height:100px;
   border:3px solid red;
}
</style>
<div class="container">
   <div class="box"></div>
   <div class="box"></div>
</div>

在IE8中试用。你会得到与IE 5 - 7相同的结果。根据文章，你也可以在歌剧中得到它。这里唯一的谜团是为什么IE不断忽视css文档。不要将容器浮动以固定它，而是在浮动之后创建一个空div并清除：两者;或者如文章所述，做溢出：隐藏; （或自动）

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

6 个答案: