Div height: height — CSS: Cascading Style Sheets

html. Как вы можете установить высоту внешнего div всегда равной определенному внутреннему div?

спросил 4 года 11 месяцев назад

Изменено 3 месяца назад

Просмотрено 3к раз

У меня есть внешний div, который содержит три внутренних div.

Я хочу, чтобы крайний левый внутренний div всегда определял высоту внешнего div . Если в других внутренних div меньше контента [чем в крайнем левом div], в них будет пустое место. Если у них больше контента [чем самый левый div], они получат полосу прокрутки.

Некоторые другие вопросы по SO касаются установки высоты внешнего div на высоту внутреннего div . Однако в моем случае у меня есть несколько внутренних div, и я не знаю, какая высота внешнего div должна быть больше или меньше высоты самого левого div.

Есть ли способ сделать это, особенно используя только CSS?

• HTML
• CSS

5

Идея состоит в том, чтобы вывести часть содержимого из потока, используя абсолютное положение, чтобы оно не влияло на высоту, а затем использовать flexbox для основного макета:

 .container {
  дисплей: гибкий;
  граница: сплошная 1px;
  отступ: 5px;
  box-sizing: граница-коробка;
}
.контейнер> div {
  гибкий: 1;
  поле: 5px;
  граница: сплошная 1px;
  box-sizing: граница-коробка;
}
div.inner {
  цвет границы: красный;
}
.inner-alt {
  положение: родственник;
  переполнение: авто;
}
.inner-alt> div {
  положение: абсолютное;
  сверху: 0;
  справа: 0;
  слева: 0;
  внизу: 0;
} 

 <дел>
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, 
  <дел>
    
ut volutpat ligula finibus a. Меценат ут pharetra анте. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo.
  Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu