html - 对齐 self : flex-end breaks on mobile zoom

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

考虑使用视口(viewport)高度单位。

在正文CSS中，包括:min-height: 100vh;