Flex 布局下 Body 高度无法 100% 的解决办法是什么？

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%。但是，这种方式需要谨慎使用，否则可能导致内容被截断而无法看到。

以上就是Flex 布局下 Body 高度无法 100% 的解决办法是什么？的详细内容，更多请关注其它相关文章！