Установите минимальную высоту Flexbox для заполнения оставшегося экрана в контейнере с прокруткой

Question

Я немного знаком с Flex-box, но эта проблема меня озадачила:

Я пытаюсь создать макет flex-box, который:

1. ставит нижний колонтитул в нижняя часть экрана ЕСЛИ содержимое короче экрана (порт просмотра)
2. Помещает нижний колонтитул в конец прокручиваемого содержимого, если содержимое длиннее экрана (порт просмотра)

Может показаться, что один или другой, но не оба из них работают. Пара целей:

• Достигните этого, если возможно, только в CSS
• Заголовок должен оставаться фиксированным в верхней части экрана, в то время как содержимое имеет прокручиваемое переполнение
• Панель заголовка будет различаться по размеру, поэтому решение должно учитывать это

Codesandbox Демо выпуска

Спасибо за любую помощь

Answer 1

Установите min-height в 100vh из #wrapper как

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

И Альпы вам нужно установить margin из body в 0, чтобы избежать прокрутки

body{
 margin: 0;
}

Для липкого заголовка в соответствии с требованием OP Пожалуйста, добавьте стили этих тезисов вместе с вышеупомянутым, который я упомянул (я просто убираю высоту, поскольку вы сказали, что заголовок имеет динамический c высота)

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

Так что Окончательные стили, которые вы должны поместить внутрь demo.css, как показано ниже

body {
  background-color: #444;
  margin: 0;}

#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#header {
    background-color: darkgray;
    /* height: 64px; */
    position: sticky;
    top: 0;
}

Answer 2

Существует решение, когда мы хотим, чтобы нижний колонтитул находился в нижней части экрана, даже если содержимое нашей оболочки flexbox короче, чем высота нашего экрана.

Решение заключается в создании элемента div (мы можем назвать это spacer) чуть выше нижнего колонтитула и присвоить ему свойство css flex: 1 (которое является сокращением для flex-grow: 1, flex-shrink: 1 и flex-based: 0). Если вы думаете об этом, мы хотим, чтобы наш div-spacer увеличивался или уменьшался в зависимости от содержимого.

Итак, я добавил:

CSS

.spacer {flex: 1;} 
#wrapper {display: flex; flex-direction: column; min-height: 100vh;}

TSX

<div className="spacer" />

Полный пример можно найти здесь

Answer 3

body {
  background-color: #444;
  position: relative;
  margin: 0;
  min-height: 100vh
}

#footer {
  background-color: red;
  height: 64px;
  width:100%;
  left: 0;
  position:  absolute;
  bottom:0;
}

Answer 4

Вы хотите прокрутить только контент ?. изменить только эти css.

#mainContent {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: white;
  height:100vh;
 }

#footer {
  background-color: red;
  height: 64px;
  position:fixed;
  bottom:0;
}