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

Ответ 1

Вам нужно принудительно нажать clear:both перед закрытием div #main_content. Вероятно, я переместил бы <br class="clear" />; в div #main_content и установил бы CSS:

.clear { clear: both; }

Обновление: Этот вопрос по-прежнему получает достаточное количество трафика, поэтому я хотел обновить ответ с помощью современной альтернативы, используя новый режим макета в CSS3, называемый гибкими блоками или Flexbox:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Ответ 2

Попробуйте следующее: overflow: auto;

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

Ответ 3

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

overflow:hidden;
height:1%;

к вашему основному div. Устраняет необходимость в дополнительном <br /> для очистки.

Ответ 4

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

display:table;

jsFiddle

Ответ 5

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

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

Ответ 6

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

height: auto;

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

Ответ 7

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

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

Ответ 8

Как правило, я думаю, что это можно устранить, выставив правило 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; }

Ответ 9

Эта проблема возникает, когда элементы Child Parent Div перемещаются. Вот Последнее решение проблемы:

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

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

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

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

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

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

Ответ 10

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

Ответ 11

Похоже, что это работает

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

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

Ответ 12

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

{ position:absolute }

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

Ответ 13

В CSS: #clear_div{clear:both;}

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

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

http://www.w3schools.com/cssref/pr_class_clear.asp: для получения дополнительной информации

Ответ 14

Я добавил 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;
}

Скажем, у вас есть раздел с определенным цветом. Используя min-height, если ширина раздела уменьшается из-за меньшего экрана, высота раздела будет расширяться, содержимое останется в пределах раздела, а ваш фон останется нужного цвета.

Ответ 15

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

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

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

Ответ 16

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

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

Ответ 17

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

• Вставьте другой элемент под элементом с плавающей точкой с свойством clear:both; или используйте clear:both; в :after для перемещаемого элемента.

• Используйте display:inline-block; или flex-box вместо float.

Ответ 18

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

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

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

Ответ 19

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

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

Для достижения этого необходимы только две вещи, дополнительные для кода OP:

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

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

Ответ 20

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

Ответ 21

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

#container{height:auto}

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

Ответ 22

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

class="container"

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

Вы можете получить загрузочный файл здесь