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

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

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

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

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

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

 Eric05 июн. 2010 г., 17:42
Вы плывете по внутренним элементам? Можете ли вы опубликовать текущий CSS?
 Michael Goltsman27 мар. 2016 г., 14:22
@Eric - это тоже была моя проблема - у моего дочернего div (ов) был float: left, когда я его убрал, «parent» автоматически распознавался и растягивался на полную высоту!

Ответы на вопрос(16)

Решение Вопроса

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

overflow:auto; 

ОБНОВИТЬ:

Еще одно решение, которое сработало:

родитель:

display: table;

ребенок:

display: table-row;
 Noah Passalacqua12 мая 2016 г., 19:44
overflow не работает для меня
 Jens02 июн. 2013 г., 07:41
Альтернативный ответstackoverflow.com/questions/450903/... и предлагает установитьdisplay:inline-block, Который работал отлично для меня.
 pilau02 апр. 2013 г., 23:46
Если это только на Webkit, то существует только 20%: P Приветствую ссылку, никогда ранее не видевшую этот сайт. Это хорошо поддерживается и обновляется? Вы клянетесь этим?
 Christoph11 июл. 2012 г., 12:17
@jmendeth Значение переполнения, называемое "оверлей", не существует. То, что работает, если дочерние элементы плавающие, объявляетoverflow:hidden.
 Alba Mendez11 июл. 2012 г., 22:33
Waaaait. Расслабьтесь. Одна вещь требуетoverlay не поддерживается за пределами Webkit. Еще одно совершенно другое - сказать, что его вообще не существует. Пожалуйста,RTFM первый, ;)
 HelloWorldNoMore27 апр. 2016 г., 00:56
Доктор Каспер Блэк, расскажите, пожалуйста, почему ваше решение работает.
 Harshith Thota11 авг. 2017 г., 09:12
дисплей: стол работал у меня отлично.
 Avio17 янв. 2019 г., 12:55
дисплей: таблица работала и у меня (на Firefox)
 Alba Mendez30 июл. 2011 г., 14:05
overflow:auto означает, что браузер должен решить, какое значение применить. Что на самом деледелает Хитрость в том,overflow: overlay.

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

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

добавлять

clear:both; 

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

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

Делает ли это то, что вы хотите?

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

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

CSS
.parent{
    overflow: auto;
} 
HTML
<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>

#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..
        </p>
    </div>
  </div>

вы управляете с помощьюoverflow:hidden; недвижимость в css

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

.parent{
   height: max-content;
}

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

 Ben Wheeler25 мая 2019 г., 16:04
Казалось, это единственное, что решило проблему в Safari 12.
 Samer Murad03 июн. 2019 г., 13:49
такое удивительное значение CSS! не поддерживается в Edge ¯_ (ツ) _ / ¯
 Robert Molina15 дек. 2018 г., 06:15
Как это свойство ведет себя с другими браузерами? По МДН:developer.mozilla.org/en-US/docs/Web/CSS/...

создав дочерний 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.

Я использую этот 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%;
 pilau02 апр. 2013 г., 23:45
Вы используете минимальную высоту, поэтому не считается;)

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

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

лево или вправо, просто добавьте это в 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; }

как описано в спецификации - несколько ответов здесь действительны и соответствуют следующему:

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

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

орошая статья, объясняющая исправлениессылка на сайт

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

,
<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
 Steve Horn21 дек. 2008 г., 07:31
Этот подход прекрасно работает в Firefox, но не работает в IE 6. Есть ли обходные пути?
 Steve Horn21 дек. 2008 г., 06:55
Это дает мне горизонтальную полосу прокрутки на родительском элементе div, когда содержимое шире, чем окно браузера. Я бы хотел, чтобы горизонтальная прокрутка была на всей странице.
 bendewey21 дек. 2008 г., 07:10
Это также при условии, что у родителя не указана высота.
 Paolo Bergantino21 дек. 2008 г., 07:03
Зачем вам переполнение: авто;? В моем тесте ясно: оба; хватило.

CSS-макет с 2 столбцами?

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

этот ответ там:

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

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

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

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

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

Ваш ответ на вопрос