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：

_{（来源：rackspacecloud.com）}

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

_{（来源：rackspacecloud.com）}

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

e.g。

<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所需的黑客。

Answer 2

您只需要按百分比给出高度属性，例如：

percent { display:block:height:100%; } as your div stands in html:

<div class="percent"></div>

Answer 3

只需添加

overflow: auto;

到外部div。

Answer 4

如果你的意思是“缩放”，就像只是简单地扩展一样，也许我把你的描述看作容器div的高度，例如500px，如果它们变得太大，所包含的div会将它推出更多。在这种情况下，也许你可以用min-height代替？

min-height: 500px;

如果你的意思是“scale”，因为容器div是500x500px，包含的初始高度为200px，扩展到400px，内容更多，将容器div推到1000x1000px（类似于缩放/放大），然后这可能会更复杂。

使用包含的divs height缩放Container div

4 个答案: