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

У меня есть эти вложенные div и мне нужен основной контейнер для расширения (по высоте), чтобы разместить DIV внутри

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accomodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

Проблема заключается в том, что #main_content не растягивается, чтобы разместить все внутренние divs, в результате чего они продолжают идти против фона.

Как я могу это решить?

+291
10 нояб. '09 в 16:51
источник поделиться
22 ответа

Вам нужно принудительно нажать 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>

Большинство современных браузеров в настоящее время поддерживают Flexbox и единицы просмотра, но если вам нужно поддерживать поддержку старых браузеров, обязательно проверьте совместимость для конкретной версии браузера.

+225
10 нояб. '09 в 17:10
источник

Связанные вопросы


Похожие вопросы

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

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

+179
11 дек. '11 в 14:02
источник

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

overflow:hidden;
height:1%;

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

+75
19 нояб. '11 в 21:20
источник

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

display:table;

jsFiddle

+52
01 июл. '13 в 7:45
источник

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

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
+13
10 нояб. '09 в 16:55
источник

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

height: auto;

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

+13
07 мар. '14 в 2:16
источник

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

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

+8
08 мая '12 в 12:21
источник

Как правило, я думаю, что это можно устранить, выставив правило 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; }
+6
10 нояб. '09 в 16:54
источник

Эта проблема возникает, когда элементы 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, так как это сделает код более семантическим. Обратите внимание, что нет необходимости добавлять точку или даже пробел в значение Контента между двойной котировкой "". Кроме того, переполнение: авто; может решить проблему, но это вызывает другие проблемы, такие как показ полосы прокрутки и не рекомендуется.

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

+6
15 июн. '14 в 2:44
источник

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

+4
10 нояб. '09 в 16:53
источник

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

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

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

+3
24 июл. '13 в 18:23
источник

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

{ position:absolute }

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

+3
28 сент. '14 в 22:46
источник

В CSS: #clear_div{clear:both;}

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

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

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

+2
16 мар. '12 в 1:43
источник

Я добавил 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, если ширина раздела уменьшается из-за меньшего экрана, высота раздела будет расширяться, содержимое останется в пределах раздела, а ваш фон останется нужного цвета.

+2
30 мая '16 в 20:11
источник

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

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

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

+1
20 апр. '12 в 21:19
источник

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

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
+1
26 июн. '16 в 11:49
источник

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

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

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

+1
04 апр. '17 в 8:56
источник

Я знаю, что это своего рода старый поток, однако это может быть достигнуто с помощью свойства 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

0
07 мар. '14 в 17:57
источник

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

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

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

0
28 июн. '13 в 3:16
источник

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

#container{height:auto}

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

0
03 окт. '17 в 15:19
источник

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

0
09 апр. '15 в 10:53
источник

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

class="container"

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

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

-3
21 июн. '16 в 11:07
источник

Посмотрите другие вопросы по меткам или Задайте вопрос