使用包含的divs height缩放Container div

Question

我试图获得一个驻留在容器div中的div,以便在容器内的div变得更高时扩展容器div的高度.当容器内的div高度高于容器本身时,它只会移过容器的底部.我希望容器与包含的div一起扩展.我如何在CSS中执行此操作？

Answer 1

格雷厄姆.您描述的是DIV的默认行为,或者任何块元素.例如,对于以下HTML:

<style type="text/css">
    dl { margin: 0; padding: 0;}

    #container {
        background-color: blue;
        padding: 5px 5px 5px 5px;
    }   

    #inner {
        background-color: red;
    }   
</style>
<div id="container">
    <div id="inner">
        <dl>
            <dt>Stuff</dt>
            <dd>Blah blah blah</dd>
            <dt>Foobar</dt>
            <dd>Bazquux</dd>
        </dl>
    </div>
</div>

您将获得以下呈现的HTML:

Basic Div http://c0180871.cdn.cloudfiles.rackspacecloud.com/normal.png

当您将内部div 浮动时,您在容器div未展开以包含内部div时所描述的情况会发生.根据定义,浮动会将块元素从其包含元素的约束中分解出来.应用"float:left;" 您的#inner元素提供以下内容:

alt text http://c0180871.cdn.cloudfiles.rackspacecloud.com/floated.png

解决方案是在包含div的底部添加块级元素,以清除浮动元素.这会导致包含div包围这个新的块级元素,从而也包含浮动元素.

例如

<style type="text/css">
    dl { margin: 0; padding: 0;}

    #container {
        background-color: blue;
        padding: 5px 5px 5px 5px;
    }   

    #inner {
        background-color: red;
        float: left;
    }   
</style>
<div id="container">
    <div id="inner">
        <dl>
            <dt>Stuff</dt>
            <dd>Blah blah blah</dd>
            <dt>Foobar</dt>
            <dd>Bazquux</dd>
        </dl>
    </div>
    <div style="clear: both;"></div>
</div>

这将使输出与第一张图像相同.

显然,如果你做了很多浮动,添加到容器div的底部可能是一件单调乏味的事情.

使用CSS2你可以用一个简单的类定义(当然是IE的黑客攻击)来做到这一点:

<style type="text/css">
    dl { margin: 0; padding: 0;}

    #container {
        background-color: blue;
        padding: 5px 5px 5px 5px;
    }

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    * html .clearfix {height: 1%;}

    #inner {
        background-color: red;
        float: left;
    }
</style>
<div id="container" class="clearfix">
    <div id="inner">
        <dl>
            <dt>Stuff</dt>
            <dd>Blah blah blah</dd>
            <dt>Foobar</dt>
            <dd>Bazquux</dd>
        </dl>
    </div>
</div>

只需将clearfix类添加到包含浮动元素的任何容器div中.注意"*html"是IE要求的黑客攻击.