php - 使用包含的 div 高度缩放容器 div

Question

我正在尝试获取驻留在容器 div 中的 div，以便在容器内的 div 变高时缩放容器 div 的高度。当容器内的 div 高度高于容器本身时，它刚好移过容器底部。我希望容器随包含的 div 缩放。我如何在 CSS 中执行此操作？

Answer 1

格雷厄姆。您所描述的是 DIV 或与此相关的任何 block 元素的默认行为。例如对于以下 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:

_{(来源:rackspacecloud.com)}

您描述的容器 div 未展开以包含内部 div 的情况发生在您 float 内部 div 时。根据定义， float 将 block 元素从其包含元素的约束中分离出来。应用“ float :左；”您的#inner 元素提供以下内容:

_{(来源:rackspacecloud.com)}

解决方案是在包含的 div 的底部添加一个清除 float 元素的 block 级元素。这会导致包含的 div 环绕这个新的 block 级元素，因此也会环绕您的 float 元素。

例如

<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>

这将给出与第一张图像相同的输出。

显然，如果您进行了大量 float 操作，将这添加到容器 div 的底部可能会很乏味。

使用 CSS2，您可以通过简单的类定义(当然还有针对 IE 的 hack)来做到这一点:

<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 类添加到任何包含 float 元素的容器 div。请注意，“* html”是 IE 所需的 hack。