Блог

Главная - Вопросы по программированию - Как вы можете установить высоту внешнего div, чтобы она всегда была равна определенному внутреннему div?

Как вы можете установить высоту внешнего div, чтобы она всегда была равна определенному внутреннему div?

#css #css-grid

Вопрос:

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

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

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

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

Наружный div высота конкретного внутреннего div

Комментарии:

1. Это настолько специфично, что я не вижу, как это можно сделать без Javascript, но я готов удивляться. 🙂 Сценарий был бы довольно простым: одна функция для установки высоты #2 и #3 равняется #1, и вы вызываете ее при загрузке, изменении размера и изменении содержимого.

2. у вас есть multiple inner divs в одной строке с полосой прокрутки…?

3. есть много вариантов, проверьте css-tricks.com/fluid-width-equal-height-columns

4. @Bhuwan потенциально, да. Я не хочу inner-div-2 или inner-div-3 не хочу быть дольше, чем inner-div-1

5. Привет всем, я не уверен, правильно ли я понял, проверьте эту скрипку , родительские вставки будут размером первого дочернего элемента, а 2-й и 3-й дочерние элементы будут не более 400 пикселей, затем вы можете max-height

Ответ №1:

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

 .container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow: auto;
}

.inner-alt>div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
} 
 <div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

Вот еще один трюк с использованием height:0;min-height:100% 

 .container {
  display: flex;
  border: 1px solid;
  padding: 5px;
  box-sizing: border-box;
}

.container>div {
  flex: 1;
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  position: relative;
  overflow:auto;
}

.inner-alt>div {
  height:0;
  min-height:100%;
} 
 <div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    <div>eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
</div>

Та же идея, что и выше, без дополнительной оболочки и с использованием CSS-сетки:

 .container {
  display: grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap:10px;
  border: 1px solid;
  padding: 10px;
  box-sizing: border-box;
}

.container>div {
  border: 1px solid;
  box-sizing: border-box;
}
div.inner {
  border-color:red;
}

.inner-alt {
  overflow:auto;
  height:0;
  min-height:100%;
} 
 <div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, </div>
  <div class="inner-alt">
    ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
 
  <div class="inner-alt">
    eget ibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    <div>ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  </div>
  <div class="inner-alt">
    eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>
<div class="container">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim ipsum orci, io vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate , eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate</div>
  <div class="inner-alt">
    ut volutpat ligula finibus a. Maecenas ut pharetra ante. Nunc volutpat est eu odio vestibulum, eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
  <div class="inner-alt">
    eget bibendum risus commodo. Nullam tristique nibh sed iaculis vulputate. Vivamus ac tincidu</div>
</div>

Комментарии:

1. Блестяще! Не могли бы вы объяснить, как height:0;min-height:100%; работает этот метод?

2. @Alecg_O (1) высота:0 приведет к тому, что элемент не будет влиять на высоту своего контейнера, так что у вас будет пустой (1) минимальная высота:100% заставит элемент быть полной высотой контейнера, где его высота была определена другими столбцами, так как у нас есть макет flexbox (или сетка CSS). Другими словами, мы определяем высоту контейнера без его содержимого, а затем используем эту высоту для его содержимого.

Ответ №2:

по-разному. два примера:

 .outer_div {
  position: relative;
  overflow: hidden;
  max-width: 300px;
  margin: 0 auto;
}
.inner_div {
  width: 33.33%;
}
.inner_div_1 {
  float: left;
  background: khaki;
}
.inner_div_2,
.inner_div_3 {
  background: darkkhaki;
  position: absolute;
  top: 0;
  height: 100%;
  overflow-y: auto;
}
.inner_div_2 {
  left: 33.33%;
}
.inner_div_3 {
  left: 66.66%;
} 
 <div class="outer_div">
  <div class="inner_div inner_div_1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="inner_div inner_div_2">
    Lorem ipsum.
  </div>
  <div class="inner_div inner_div_3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div> 
 .outer_div {
  display: flex;
  flex-direction: row;
  max-width: 300px;
  margin: 0 auto;
  background : gray;
}
.inner_div {
  width: 33.33%;
}
.inner_div > div {
  position: relative;
  height: 100%;
}
.inner_div_1 span {
  background: khaki;
}
.inner_div_2 span,
.inner_div_3 span {
  background: darkkhaki;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
} 
 <div class="outer_div">
  <div class="inner_div inner_div_1">
    <span>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </span>
  </div>
  <div class="inner_div inner_div_2">
    <div>
      <span>
        Lorem ipsum.
      </span>
    </div>
  </div>
  <div class="inner_div inner_div_3">
    <div>
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </span>
    </div>
  </div>
</div>

Комментарии:

1. Но эти решения основаны на том факте, что вы знаете inner-div-3 , что они будут выше, поэтому они не очень гибкие

Метки: ,