сделать высоту div расширяться с его содержанием

попробуйте это: overflow: auto;

это работает для моей проблемы..

добавить следующее:

overflow:hidden;
height:1%;

к вашему основному div. Исключает потребность для extra <br /> для ясного.

в качестве альтернативного способа вы также можете попробовать это, что может быть полезно в некоторых ситуациях

display:table;

jsFiddle

Я бы просто использовать

height: auto;

в вашем div. Да, я знаю, что немного опоздал, но я подумал, что это может помочь кому-то, как помогло бы мне, если бы это было здесь.

Thw следующее должно работать:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

используйте тег span с display:inline-block css прилагается к нему. Затем вы можете использовать CSS и манипулировать им как div множеством способов, но если вы не включаете width или height оно расширяет и втягивает основанный на своем содержании.

надеюсь, что это поможет.

обычно я думаю, что это можно решить, заставив clear:both правило о последнем дочернем элементе #items_list.

вы можете использовать:

#items_list:last-child {clear: both;}

или, если вы используете динамический язык, добавьте дополнительный класс к последнему элементу, сгенерированному в любом цикле, создающем сам список, поэтому вы получите что-то в своем html, например:

<div id="list_item_20" class="last_list_item">

и css

.last_list_item {clear: both; }

эта проблема возникает, когда дочерние элементы родительского Div плавают. Вот это Последний Решением проблемы:

в файле CSS напишите следующий класс под названием .clearfix вместе с псевдо селектор :после

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

затем в вашем HTML добавьте .clearfix класс для вашего родительского Div. Например:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Он должен работать всегда. Вы можете назвать имя класса как .группа вместо .clearfix, так как это сделает код более семантическим. Обратите внимание, что нет необходимости добавлять точку или даже пробел в значении контент между двойные кавычки "". Кроме того,переполнение: авто; может решить проблему, но это вызывает другие проблемы, такие как показ полосы прокрутки и не рекомендуется.

Источник: Блог Лизы Каталано и Криса Койера

добавьте свойство float в #main_content div-он будет расширяться, чтобы содержать его плавающее содержимое

прежде чем что-либо делать, проверьте правила css с помощью:

{ position:absolute }

удалить, если они существуют и не нужны.

похоже, это работает

html {
 width:100%;
 height:auto;
 min-height:100%
} 

Он принимает размер экрана как минимум, и если содержимое расширяется, оно растет.

плавающие элементы не занимают пространство внутри родительского элемента, так как имя предполагает, что они плавают! Таким образом, если высота явно не предоставляется элементу с плавающими дочерними элементами, то родительский элемент будет сжиматься и не будет принимать размеры дочернего элемента, также если его задано overflow:hidden; его дети могут не отображаться на экране. Существует несколько способов решения этой проблемы:

1. вставьте другой элемент под плавающий элемент с clear:both; свойства, или использовать clear:both; on :after плавающего элемента.

2. использовать display:inline-block; или flex-box вместо float.

в CSS: #clear_div{clear:both;}

после тега div внутреннего div добавьте этот Новый следующий div

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp дополнительные сведения

Я добавил Bootstrap в проект с section теги, которые я установил на 100% высоты экрана. Он работал хорошо, пока я не сделал проект отзывчивым, и в этот момент я заимствовал часть jennyfofennyответом таким образом, фон моего раздела соответствовал фону содержимого, когда размер экрана изменился на меньших экранах.

мой новый section CSS выглядит так:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Я сам сталкиваюсь с этим в проекте - у меня был стол внутри div, который выливался из нижней части div. Ни один из исправлений высоты, которые я пробовал, не работал, но я нашел странное исправление для него, и это поставить абзац в нижней части div с точкой в нем. Затем стиль "цвет" текста, чтобы быть таким же, как фон контейнера. Работал аккуратно, как вам нравится, и не требуется javascript. Неразрывное пространство не будет работать - как и прозрачное изображение.

по-видимому, ему просто нужно было увидеть, что под таблицей есть некоторое содержимое, чтобы растянуть его. Интересно, сработает ли это для кого-нибудь еще.

Это то, что заставляет дизайнеров прибегать к макетам на основе таблиц - количество времени, которое я потратил, выясняя этот материал и делая его совместимым с кросс-браузером, сводит меня с ума.

Я пробовал это, и это сработало

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

вы пробовали традиционный способ? дайте основную высоту контейнера: auto

#container{height:auto}

я использовал это, и это работало большую часть времени со мной.

Если вы используете jQuery UI, у них уже есть класс, в котором работает только шарм добавить <div> внизу внутри div, который вы хотите расширить с height:auto; затем добавьте имя класса ui-helper-clearfix или используйте этот атрибут стиля и добавьте, как показано ниже:

<div style=" clear:both; overflow:hidden; height:1%; "></div>

добавить класс jQuery UI в clear div, а не div, который вы хотите развернуть.

Я знаю, что это своего рода старый поток, однако этого можно достичь с помощью min-height свойства CSS в чистом виде, поэтому я оставлю это здесь для будущих ссылок:

Я сделал скрипку на основе кода OP, размещенного здесь:http://jsfiddle.net/U5x4T/1/, по мере удаления и добавления divs внутри, вы заметите, как контейнер расширяется или уменьшается в размере

единственное, что вам нужно для этого, дополнительно к OP-коду:

*переполнения в основной контейнер (требуется для плавающих divs)

* свойство css min-height, дополнительная информация доступна здесь:http://www.w3schools.com/cssref/pr_dim_min-height.asp

добавлен дисплей: встроенный в div, и он вырос автоматически (не материал прокрутки), когда содержание высоты стало больше, чем установленная высота div 200px

очень простой способ

на родительском DIV:

height: 100%;

эта работа для меня каждый раз

нет необходимости использовать много CSS, просто используйте bootstrap, а затем используйте:

class="container"

для div, который должен быть заполнен.

вы можете получить bootstrap отсюда