使用包含的 div 高度缩放容器 div答案

【问题标题】：Scaling a Container div with the contained divs height使用包含的 div 高度缩放容器 div
【发布时间】：2019-04-05 12:59:26
【问题描述】：

我正在尝试获取驻留在容器 div 中的 div，以在容器内的 div 变高时缩放容器 div 的高度。当容器内 div 的高度比容器本身高时，它只会移动到容器的底部。我希望容器与包含的 div 一起缩放。如何在 CSS 中做到这一点？

【问题讨论】：

标签： php html css

【解决方案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 时。根据定义，浮动将块元素打破其包含元素的约束。应用“浮动：左；”给你的#inner 元素提供以下内容：

_{（来源：rackspacecloud.com）}

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

【讨论】：

这并没有解决他的问题，这很不幸，因为您似乎在答案上付出了很多努力。在#container 上放置 500 像素的高度，您就会意识到。
不确定我是否像你一样理解他的问题。没有代码的问题 = 可以解释。
我个人最喜欢解决这个问题的方法是在浮动元素的末尾添加一个清除元素。如果您在结束容器之前添加
，它将正确设置其高度。不必使用任何 CSS hack，但它确实为您的 HTML 添加了额外的元素。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

只需添加

overflow: auto;

到外部 div。

【讨论】：

【解决方案4】：

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

min-height: 500px;

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

【讨论】：