увеличьте высоту div с его содержимым

376

У меня есть эти вложенные элементы 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 accommodate 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она не растягивается, чтобы вместить все внутренние элементы, в результате чего они продолжают идти на фоне.

Как я могу решить эту проблему, учитывая вышеописанный сценарий?

css height

— Патрик
источник

5

Ребята всем спасибо за ответы! лучшее решение для моего конкретного случая заключалось в том, чтобы жестко кодировать BR, чтобы очистить обе стороны (спасибо Jennyfofenny и Ricebowl). В любом случае, работали и другие решения: установка overflow: auto была в порядке, а плавающее #main_content также было в порядке (хотя ir уменьшил ширину этого div до размера дочерних div). Теперь, будучи новичком, мне интересно: есть ли у этих решений недостатки, или я могу использовать их безразлично? (например, возможно, один из них не работает с IE6 или подобным ...)

— Патрик

1

@ Патрик, если вы хотите доработать свой вопрос, нажмите на ссылку «изменить» (под текущим текстом вопроса) и добавьте дополнительные вопросы. Конвенция предлагает использовать что-то вроде <strong>Edited</strong>$Reason_for_revising_question...Вас, возможно, потребуется изменить заголовок вопроса, чтобы отразить изменения, если в фокусе есть значительное изменение или дополнение. =)

— Дэвид говорит восстановить Монику

4

Вы также никогда не закрывали divтег с id='container'. Это может вызвать некоторые проблемы.

— Баткинс

@patrick, у вас также нет CSS для .clearкласса. Вы забыли это, или это в вашем оригинальном коде? .clearКласс на том , что brочень важно , так как @jennyfofenny упоминает в своем ответе.

— Cannicide

281

Вам нужно форсировать a clear:bothдо #main_contentзакрытия div. Я, вероятно, переместил бы <br class="clear" />;в #main_contentdiv и установил бы 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 и viewport , но если вам необходимо поддерживать более старые браузеры, обязательно проверьте совместимость для конкретной версии браузера.

— jennyfofenny
источник

4

Вот статья w3schools о свойстве CSS clear. По сути, очистка означает, что элемент, к которому применяется очистка, начинается ниже поплавков в его потоке (или только слева, только справа или оба).

— Jennyfofenny

230

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

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

— Sipőcz Петер
источник

10

+1, это решение элегантно и не добавляет невидимый тег на вашу страницу. Смотрите эту скрипку: jsfiddle.net/XmKrm/1

— Набиль Кадими

5

Авто переполнения работало хорошо для меня. К вашему сведению, будет добавлена полоса прокрутки, если высота автоконтейнера переполнения меньше, чем содержимое внутри. Увеличьте его или установите высоту: авто вместе с переполнением.

— Брайан Майерс

@ Roozbeh15 добавить display: block;с ним

— BadAtPHP

2

Лучшее и простое решение ... Вы спасли мой день. Спасибо

— Кашьяп Котак

Господи, это сработало чудесно. Кто-нибудь хочет объяснить механизм, почему это работает?

— Merkurial

86

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

overflow:hidden;
height:1%;

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

— Ник
источник

Вот Это Да! это полностью противоположно тому, что я ожидал! переполнение: скрытый = развернуть, чтобы соответствовать содержанию! я бы никогда не догадался об этом!

— mulllhausen

Да, это сработало и для меня, и не совсем понятно, почему. Любое объяснение, почему работают «высота 1%» и «скрытый переполнение»?

— Acarlon

1

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

— Макс Яри

1

Переполнение: скрытый скрывает полосы прокрутки, но сохраняет размер блока

— authentictech

работал для меня только с «overflow: hidden», но «overflow: auto» также работал и не показывал полосы прокрутки.

— Whirlwind991

60

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

display:table;

jsFiddle

— h0mayun
источник

24

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

height: auto;

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

— Чарльз
источник

height: auto;заставляет все пункты ниже перемещаться к вершине. С этим свойством в моем основном содержимом div нижний колонтитул моей страницы перемещается вверх, так что он касается заголовка и перекрывает мой контент div.

— Аарон Франке

1

Это было решением для меня. Спасибо!

— Ник Хаммер-Эллис

14

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

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

— Стирпайк
источник

добавление переполнения: автоматически сработало, хотя если я добавлю также width: 100%, это приведет к тому, что div (#main_content) будет немного больше, чем его родительский div. Не понял почему!

— Патрик

2

это потому, что отступы учитываются в дополнение к указанной ширине, поэтому ширина вашего элемента равна 100% + отступы 5px слева + отступы 5px

— NickV

1

переполнение: авто; работал для меня, спасибо тебе, Ведди.

— Cosco Tech

9

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

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

height: 100%;

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

— Даниэль Бельтрами
источник

8

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

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

— Темный Марк
источник

Ваша надежда сработала: она по крайней мере помогла мне! :) Кстати, я оставил свой элемент как div(вместо span), но display: inline-blockвсе еще работал в моем случае (Chromium).

— snapfractalpop

6

Обычно я думаю, что это может быть решено путем применения 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

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

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

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

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

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

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

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

— Ифти Махмуд
источник

5

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

— луч
источник

Спасибо Рэй, это сработало, хотя и сократило div до размера его содержимого (#items_list), ширина которого: 400px; Ваше решение было бы действительно хорошим, если бы я мог заставить #main_content оставаться на полную ширину - какие-либо предложения?

— Патрик

@Ray 2 и немного лет спустя, и это только избавило меня от потенциальной головной боли с подобной проблемой. Спасибо!

— Джон Х

4

Прежде чем что-либо делать, проверьте правила CSS с:

{ position:absolute }

Удалить, если есть и не нужны.

— onalbi
источник

2

Потому что «элементы с абсолютным позиционированием удаляются из потока, поэтому другие элементы игнорируются. Таким образом, вы не можете установить родительскую высоту в соответствии с элементом с абсолютным позиционированием». stackoverflow.com/questions/12070759/…

— Федерико

4

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

Вставьте другой элемент ниже плавающего элемента со clear:both;свойством или используйте clear:both;on :afterплавающего элемента.
Используйте display:inline-block;или flex-boxвместо float.

— Апурв Шривастава
источник

3

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

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

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

— SubstanceMX
источник

2

В CSS: #clear_div{clear:both;}

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

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

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

— Ingrid
источник

2

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

Мой новый sectionCSS выглядит так:

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

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

#container{height:auto}

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

— Мишель Димвейт
источник

1

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

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

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

— Нэнси Гастингс-Трю
источник

Должен быть какой-то способ сделать это с CSS, но я понятия не имею, что это будет. Это сработало для меня, но мне пришлось добавить ширину: 100%; высота: авто; мин-высота: 100%; позиция: относительная;

— RationalRabbit

1

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

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

— Ахмед Абелела
источник

0

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

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

добавьте класс пользовательского интерфейса jQuery в чистый div, а не в div, который вы хотите расширить.

— Лукас М. Оливейра
источник

0

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

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

Единственные две вещи, которые вам нужны для достижения этой цели, в дополнение к коду OP:

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

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

— Хуан Карлос Алпизар Шиншилла
источник

0

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

— Элле
источник

1

Это не четкий ответ на вопрос. Для замечаний, пожалуйста, используйте функцию комментария.

— ksbg

0

Вы можете использовать CSS Grid Layout . Поддержка достаточно широкая на данный момент: отметьте ее caniuse .

Вот пример на jsfiddle. Также пример с тоннами текстового материала.

HTML код:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

Код CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

— Шариков Владислав
источник

0

Я попробовал почти все предложения, перечисленные выше, и ни одно из них не сработало. Однако «display: table» помог мне.

— PongGod
источник

-1

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

class="container"

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

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

— Тадео Арло
источник