align-self: гибкие перерывы на мобильном зуме

Question

У меня есть стандартный макет, состоящий из заголовка, содержимого и нижнего колонтитула:

-----------------
|    header     |
|----------------
|               |
|    content    |
|               |
|---------------|
|---------------|
|    footer     |
-----------------

На рабочем столе все работает отлично, однако, если я использую мобильный телефон и увеличиваю нижний колонтитул, он больше не выравнивается по концу страницы:

---------------
|             |
|   content   |
|             |
|-------------|
|-------------|
|   footer    |
|-------------|
| empty space |
---------------

CSS

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#footer {
  align-self: flex-end;
}

Answer 1

Рассмотрите возможность использования единиц высоты окна просмотра.

В тело CSS входят: min-height: 100vh;