Flex布局下实现body高度100%及div垂直居中显示的完整解决方案
本文针对Flex布局下，如何让body高度始终占据整个屏幕，同时内部div垂直居中的问题，提供完整的解决方案，并解决移动端滚动条问题。
问题：在PC端和移动端，需要body元素占据整个屏幕高度，同时内部的.blog div垂直居中显示。PC端效果正常，但移动端出现右侧滚动条，body高度未达100%。
原因分析：仅设置body { height: 100%; }不足以保证body高度始终与视窗高度一致。浏览器会根据内容高度决定body高度，内容超过视窗高度则出现滚动条。
解决方案：需要同时设置html和body的高度为100%。
-
方法一：使用
height: 100%;为html标签添加height: 100%;，确保html元素占据整个视窗高度，从而影响body的高度。 -
方法二：使用
height: 100vh;使用height: 100vh;代替height: 100%;。vh单位表示视窗高度的百分比，更直接地保证body高度与视窗高度一致。
移动端滚动条问题及优化：
height: 100vh;在某些移动端浏览器可能出现实际高度超过视窗高度的问题。这是因为移动端浏览器可能包含地址栏或状态栏，这些元素占用一部分视窗高度，导致body实际高度超过可视区域。
针对这种情况，建议：
-
测试和调整： 在不同移动端浏览器上测试，根据实际情况微调高度值，例如使用
calc(100vh - Xpx)，其中X代表地址栏和状态栏高度的估计值。 -
使用JavaScript动态调整： 通过JavaScript获取视窗高度，并动态设置
body的高度，可以更精确地适应不同设备和浏览器。 -
考虑其他布局方案： 如果以上方法仍无法完美解决，可以考虑使用其他布局方案，例如使用
position: absolute;和top: 0; bottom: 0;等属性结合transform: translateY(50%);实现垂直居中。
通过以上方法，可以有效解决Flex布局下body高度和div垂直居中显示的问题，并确保在不同设备和浏览器上都能获得最佳显示效果。 记住，实际应用中可能需要根据具体情况进行调整和测试。
