Как заставить мой контейнер заполнить нижнюю часть моей страницы (если страница не прокручивается)

Я столкнулся с этой проблемой, я думаю, что ответ очень прост, но я не могу его понять.

Сначала объясню словами: У меня темный фон, моя навигация прозрачна (поэтому она выглядит как фон), а контейнер моей страницы представляет собой что-то вроде большой белой карты.

когда страница прокручивается => высота контейнера страницы достигает нижней части страницы: прокручиваемый вид
когда страница не прокручивается (недостаточно контента для прокрутки) => до самого низа есть пустая область: вид без прокрутки

Я проверил CSS, странного поведения нет. Я попробовал кое-что, найденное в Интернете, но результат оказался противоположным. вот моя структура dom:

#root, html {
  background: #353333;
}
.page-container {
  background-color: white;
  margin: 0 1rem;
}
.grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  column-gap: 1.5rem;
  row-gap: 1rem;
  height: fit-content;
}

<html>
  <body>
    <div id = "root">
      <div class = "layout">
        <div class = "navigation">logo, nav links ...</div>
        <div class = "page-container">
          <div class = "grid">
            <div>div</div>
            <div>div</div>
            <div>div</div>
            <div>div</div>
            <div>div</div>
            <div>div</div>
            <div>div</div>
            <div>div</div>
            <div>div</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Я не могу поделиться из-за политики конфиденциальности. Если я что-то упускаю, просто спросите, и я обновлю свой пост.

Я пытался увеличить высоту тела и корня

🤔 А знаете ли вы, что...
С помощью тегов форм HTML можно создавать интерактивные формы для ввода данных пользователем.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос

Ответы:

Я думаю, то, что вы здесь ищете, иногда называют шаблоном «липкого нижнего колонтитула». При этом используется Flexbox, чтобы расширить область основного содержимого и заполнить любое пустое пространство, при этом любой нижний колонтитул будет прикреплен к нижней части области просмотра. Самое замечательное в этом методе то, что когда на странице содержится больше контента, чем может поместиться в области просмотра, все остальное работает так, как вы ожидаете, вы просто прокручиваете страницу, чтобы прочитать остальную часть контента.

Филип Уолтон на своем сайте «Solved by Flexbox» очень подробно объясняет эту технику: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Глядя на вашу структуру HTML, вам, возможно, придется расширить приведенный выше пример или настроить ее, но я думаю, что вы сможете достичь своей цели, используя эту технику.

Вы можете использовать свойство min-height для установки элемента page-container, вот пример:

.page-container {
    min-height: 100vh;
}

Решено

Обоснование

Когда вы сталкиваетесь с такой проблемой, обычно разумно сузить ее до минимального количества необходимых элементов, чтобы вы могли четко видеть, какие свойства CSS необходимы, а какие нет.

Шаги

В вашем примере вам нужно сделать три вещи:

Убедитесь, что родительские контейнеры отображаются на высоте 100 %.
Установите display: flex на родительском узле, в данном случае .layout
Установите flex-grow: 1 на узлах, которые нужно вырасти.

Рабочий пример

html, body {
  height: 100%;
  margin: 0;
  background: #353333;
  color: #ccc;
}

.layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.growing-child {
  flex-grow: 1;
  background-color: white;
  color: #333;
}

<div class = "layout">
  <header>This container does not grow</header>

  <main class = "growing-child">
    <h1>Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </main>

  <footer>Optional footer</footer>
</div>

Примечание

Если у вас есть html и body и #root и layout, то все они должны либо иметь 100% высоту, либо иным образом расти вместе с содержимым.