自我调整：移动缩放功能无法使用

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;