увеличьте высоту div с его содержимым - PullRequest
Новая
       57

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

351 голосов
/ 10 ноября 2009

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

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

Ответы [ 24 ]

261 голосов
/ 10 ноября 2009

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

.clear { clear: both; }

Обновление: Этот вопрос по-прежнему получает достаточное количество трафика, поэтому я хотел обновить ответ с помощью современной альтернативы, использующей новый режим макета в CSS3, называемый Flexible box или 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 и единицы просмотра , но если вам необходимо поддерживать более старые браузеры, обязательно проверьте совместимость для конкретной версии браузера.

215 голосов
/ 11 декабря 2011

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

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

81 голосов
/ 20 ноября 2011

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

overflow:hidden;
height:1%;

на ваш основной див. Исключает необходимость дополнительных <br /> для очистки.

57 голосов
/ 01 июля 2013

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

display:table;

jsFiddle

22 голосов
/ 07 марта 2014

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

height: auto;

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

14 голосов
/ 10 ноября 2009

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

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
8 голосов
/ 08 мая 2012

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

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

6 голосов
/ 10 ноября 2009

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

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

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

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

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

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

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

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

5 голосов
/ 10 ноября 2009

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...