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% 的解决办法是什么？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2804349.html
