Расширение родительского <div> до высоты его детей

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

<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 для этого?

Ответы

Ответ 1

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

overflow:auto;

UPDATE:

Еще одно решение:

Родитель

display: table;

Ребенок

display: table-row;

Ответ 2

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

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

Ответ 3

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

Альтернативный ответ Как сделать div не больше его содержимого?... и он предлагает установить отображение: встроенный блок. Это сработало для меня отлично. - Jens Jun 2 at 5:41

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

Ответ 4

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

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

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

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

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

#parent
{
    padding: 30px 0px 20px 0px;
}

Ответ 5

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

<div id="parent" class="clearfix">

Ответ 6

Добавить

clear:both;

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

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

Ответ 8

Я сделал родительский 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 padding с обеих сторон создает два больших пустых столбца, чтобы вы могли разместить абсолютно позиционированные divs, как вам угодно. Вы можете даже изменить верхнюю и нижнюю части прокладки, чтобы поместить разделители div и нижние колонтитулы, используя положение: absolute.

Ответ 9

Это делает то, что вы хотите?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Ответ 10

Я использую этот CSS для родителя, и он работает:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;

Ответ 11

Вам необходимо применить решение clearfix в родительском контейнере. Вот хорошая статья, объясняющая ссылку

Ответ 12

Если ваш контент внутри #childRightCol и #childRightCol перемещается влево или вправо, просто добавьте его в css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }

Ответ 13

Это работает, как описано в спецификации - здесь есть несколько ответов и соответствует следующему:

Если у него есть дочерние элементы уровня блока, высота - это расстояние между верхним пограничным краем верхнего крайнего дочернего блока на уровне блока, у которого нет полей, рухнувших через него, а нижний крайний край самого нижнего блока - который не имеет полей, рухнувших через него. Однако, если элемент имеет ненулевое верхнее дополнение и/или верхнюю границу, или является корневым элементом, то содержимое начинается с края верхнего края самого верхнего дочернего элемента. (В первом случае выражается тот факт, что верхнее и нижнее поля элемента сжимаются с верхними и нижними границами дочерних элементов, тогда как во втором случае наличие прокладки/границы препятствует свертыванию верхних полей.) Аналогично, если элемент имеет ненулевое нижнее дополнение и/или нижнюю границу, тогда содержимое заканчивается у края нижнего края самого нижнего дочернего элемента.

отсюда: https://www.w3.org/TR/css3-box/#blockwidth

Ответ 14

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>