先写一个布局
<div className="flex flex-col">
<div className="bg-red-400">第一个子元素,固定高度</div>
<div className="flex-1 bg-gray-500">第二个子元素,填充屏幕剩余高度</div>
</div>
实际运行结果
可以看到,第二个子元素并没有填充完剩余高度。这是因为flex-1
只会让第二个子元素在其父元素的高度范围内填充剩余的空间。但默认情况下,父元素的高度并未设置为屏幕高度,所以 flex-1 的行为有限制
解决方法:给父元素设置一个高度,这里添加h-screen
类,高度为100vh,也就是视口高度的100%
<div className="flex flex-col h-screen">
<div className="bg-red-400">第一个子元素,固定高度</div>
<div className="flex-1 bg-gray-500">第二个子元素,填充屏幕剩余高度</div>
</div>
再次运行查看结果
在电脑浏览器上进行测试时,一切看起来都很正常。然而,当我在手机浏览器上打开页面时,却意外地发现了滚动条的出现
移动端浏览器(如 Safari 和 Chrome)在滚动页面时,地址栏和工具栏会动态显示或隐藏。隐藏时,实际可见的视口高度会变大,而 100vh 是基于初始视口高度计算的。结果是,内容高度可能超过可用区域,导致页面滚动
解决方法,把100vh改成100dvh。dvh 是 dynamic viewport height 的缩写,表示在视口发生任何动态变化时的高度(如工具栏的隐藏或显示,或屏幕旋转时)。
dvh 适用于动态视口变化的情况,特别是当用户滚动页面或旋转设备时,dvh 会依据最新的视口计算元素的高度。这使得页面在交互时更为流畅,避免了元素高度的突变。