Расширение родителя <div>до высоты его потомков - PullRequest
Новая
       32

Расширение родителя <div>до высоты его потомков

275 голосов
/ 21 декабря 2008

У меня есть структура страницы, подобная этой: 

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Я бы хотел, чтобы родительский div расширился в height, когда внутренний div 'height увеличится.

Edit:
Одна из проблем заключается в том, что если width дочернего содержимого расширяется за width окна браузера, мой текущий CSS устанавливает горизонтальную полосу прокрутки на родительском div. Я хотел бы, чтобы полоса прокрутки была на уровне страницы. В настоящее время мой родительский div установлен на overflow: auto;

Не могли бы вы помочь мне с CSS для этого?

Ответы [ 16 ]

497 голосов
/ 02 января 2011

Попробуйте это для родителя, у меня это сработало. 

overflow:auto;

UPDATE:

Еще одно сработавшее решение:

Родитель : 

display: table;

Дети 

display: table-row;
25 голосов
/ 21 декабря 2008

добавить clear:both. предполагая, что ваши столбцы плавающие. В зависимости от того, как указан ваш родительский рост, может потребоваться переполнение: auto; 

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
15 голосов
/ 11 октября 2013

Как сказал Дженс в комментарии

Альтернативный ответ: Как сделать div не больше его содержимого? … и это предлагает установить отображение: inline-block. Который работал отлично для меня. - Йенс 2 июня в 5: 41

Это работает намного лучше для меня во всех браузерах.

5 голосов
/ 11 сентября 2018

Попробуйте указать max-content для роста родителей. 

.parent{
   height: max-content;
}

https://jsfiddle.net/FreeS/so4L83wu/5/

4 голосов
/ 16 июня 2010

Для тех, кто не может понять это в инструкциях от этот ответ есть:

Попробуйте установить padding значение more затем 0 , если у дочерних элементов div есть margin-top или margin-bottom, вы можете заменить его на padding

Например, если у вас есть 

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

будет лучше заменить его на: 

#parent
{
    padding: 30px 0px 20px 0px;
}
3 голосов
/ 27 апреля 2011

Добавить 

clear:both;

К css родительского div или добавить div внизу родительского div, который очищает: оба;

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

3 голосов
/ 21 декабря 2008

Использование чего-то вроде самоочистки div идеально подходит для такой ситуации, как this . Тогда вы просто будете использовать класс на родительском ... как: 

<div id="parent" class="clearfix">
1 голос
/ 31 января 2011

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

Пример: 

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Исходя из того, что maincolumn div является самым глубоким дочерним div в #wrap, это определяет глубину #wrap div, а заполнение 200px с каждой стороны создает два больших пустых столбца, в которые вы можете поместить абсолютно позиционированные div, как вам угодно. Вы можете даже изменить верхний и нижний отступы, чтобы разместить div и верхний колонтитул, используя position: absolute.

1 голос
/ 21 декабря 2008

Вы ищете макет CSS 2 столбца ?

Если это так, взгляните на инструкции , это довольно просто для начала.

0 голосов
/ 06 марта 2019

Ниже код работал для меня.

CSS 

.parent{
    overflow: auto;
}

HTML 

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...