flex 布局下 body 高度无法 100% 的解决办法
你遇到的问题，是由于在 flex 布局中，子元素的垂直对齐方式会受到父元素高度的影响。
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}上述样式中，由于 html 和 body 元素都设置了高度为 100%，因此 body 元素的 flex 布局容器也会有 100% 的高度。这样，blog 这个 flex 子元素就能垂直居中了。
然而，在移动端上，由于屏幕高度受限，如果 blog 元素的内容过多，超出屏幕高度，就会出现右侧滚动条的情况。这时，body 元素的高度就无法达到 100%，从而导致 body 元素无法满屏。
解决办法有两种：
- 方案 1：将 html 和 body 元素的高度改为 100vh（viewport height），而不是 100%，这样 body 元素的高度就不会受到屏幕高度的限制。但是，这种方式在某些情况下可能会有其他问题，比如在移动设备的地址栏出现/消失时，会导致页面出现跳动。
- 方案 2：给 body 元素设置 overflow: hidden，强制隐藏 body 元素中超出的内容，这样 body 元素的高度就能达到 100%。但是，这种方式需要谨慎使用，否则可能导致内容被截断而无法看到。
