Как обеспечить, чтобы содержащий элемент имел полную высоту страницы, независимо от количества динамических c дочерних элементов

Question

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

Общая структура

поиск. html

<div class="outer-container">
  <div class="inner-container">
    <div class="body">
      <app-results></app-results>
    </div>
  </div>
</div>

результатов. html

<div class="card" *ngFor="let c of content; let index = index">
  <h1 class="h">{{index}}</h1>
</div> 

Я пробовал установить .outer-container на [display: inline-flex][1]; что действительно хорошо работает. Пока не будет динамически добавлено больше card s в представление. В этот момент содержащий элемент остается на том же месте, где он был до того, как было вставлено содержимое Dynami c, прямо в предыдущей нижней части окна просмотра.

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

Кроме того, в моем приложении overflow: auto создает двойную полосу прокрутки, так что выиграл не работает.

Как я могу сохранить всю высоту, независимо от количества элементов?

Подробнее StackBlitz Вы должны нажать ссылку «поиск» чтобы добраться до правильного маршрута. (Я добавил angular роутер, чтобы убедиться, что мое воспроизведение было максимально точным)

Answer 1

Я изменил пару строк в вашем stackblitz, и, похоже, он работает так, как вы описали. Вы можете установить высоту .outer-container fit-content и min-height 100%:

.outer-container {
  width: 100%;
  position: relative;
  height: fit-content;
  min-height: 100%;
  display: inline-flex;
  flex-direction: column;
  background: pink;
  .inner-container {
    height: inherit;
  }
}

Answer 2

Я посмотрел твой StackBlitz. Я предполагаю, что проблема в том, что при нажатии кнопки «Переключить» розовый фон не расширяется. Если это так, все, что вам нужно сделать, это добавить overflow: auto; к CSS, как показано ниже. Я попробовал это на вашем StackBlitz, и он сработал.

.outer-container {
  width: 100%;
  position: relative;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  background: pink;
  overflow: auto;
  .inner-container {
    height: inherit;
  }
}

Свойство переполнения указывает, что должно произойти, если содержимое переполняет поле элемента.