IP地址检测
视频播放器
输入关键词搜索
登录
HTML中元素的高度设置成100vh在手机上依旧能滚动的问题

HTML中元素的高度设置成100vh在手机上依旧能滚动的问题

2025-01-15
暂无分类

先写一个布局

<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 会依据最新的视口计算元素的高度。这使得页面在交互时更为流畅,避免了元素高度的突变。

THE END
0/500
暂无评论
📢网站公告
欢迎来到这里
⚙️实用工具
html转pdfmarkdown编辑器
本站推荐:腾讯云服务器仅需2.3折 (点击直达)
用户协议
隐私政策
Build Time: 2025-02-06 16:15:33