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

увеличьте высоту 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 ]

0 голосов
/ 21 июня 2016

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

class="container"

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

Здесь вы можете получить начальную загрузку

0 голосов
/ 09 апреля 2015

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

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

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

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

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

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

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

0 голосов
/ 28 июня 2013

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

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

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

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

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

...