Масштабирование контейнера Div с высотой содержимого div

Question

Я пытаюсь получить div, который находится в контейнере div, чтобы масштабировать высоту div контейнера, когда div внутри контейнера становится выше. Когда высота div внутри контейнера становится выше, чем сам контейнер, он просто перемещается за дно контейнера. Я хочу, чтобы контейнер масштабировался с содержимым div. Как мне сделать это в CSS?

Answer 1

Graham. То, что вы описываете, является поведением по умолчанию 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, возникает, когда у вас float внутренний div. Плавающий, по определению, вырывает элемент блока из ограничений содержащего его элемента. Применяя «float: left;» на ваш элемент #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):

<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 к любому из ваших контейнерных элементов, содержащих плавающие элементы. Обратите внимание, что "* html" - это взлом, требуемый IE.

Answer 2

Просто добавьте

overflow: auto;

до внешнего деления.

Answer 3

Вам просто нужно задать свойство высоты в процентах, например:

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

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

Answer 4

Если вы имеете в виду «масштабирование» как простое расширение, возможно, я прочитал ваше описание как контейнерный div, имеющий высоту, скажем, 500px, и содержащиеся в нем div будут выталкивать это больше, если они становятся слишком большими. В таком случае, может быть, вместо этого вы можете использовать min-height?

min-height: 500px;

Если вы имеете в виду «масштаб», так как в контейнере div составляет 500x500px, содержимое занимает начальную высоту 200px, которая увеличивается до 400px с большим количеством контента, что увеличивает контейнер div до 1000x1000px (аналогично увеличению / увеличению), затем это может быть сложнее.