Skip to content

GitLab

Closed
Created by 陶家行@taojiahang

ios应用 webview屏逗导致 页面偶现不能吸底的问题

背景

在开发时遇到，使用 fixed 布局时，设置 bottom 为 0，样式依然没有吸底。

企业微信截图_16209795938585

调试时为 body、html 设置了 border，发现 body 整体就没有占满整个屏幕。

body,html{
    background-color: red;
    border:2px solid #000;
}

背景

在开发时遇到，使用 fixed 布局时，设置 bottom 为 0，样式依然没有吸底。

533194cd-1f92-41da-a3df-57cda4702ae6

调试时为 body、html 设置了 border，发现 body 整体就没有占满整个屏幕。

body,html{
    background-color: red;
    border:2px solid #000;
}

解决方法

为 body、html 设置100vh高度即可解决

body,html{
-	height:100%;
+	height:100vh;
}

学到什么

可能是由于 ios 打开 webview 时，页面初始视口窗并非占满全屏，导致 html,body 高度固定，如果只是设置100%，就可能会出现上述问题。

解决方法

为 body、html 设置100vh高度即可解决

body,html{
-    height:100%;
+    height:100vh;
}

学到什么

可能是由于 ios 打开 webview 时，页面初始视口窗并非占满全屏，导致 html,body 高度固定，如果只是设置100%，就可能会出现上述问题。

注意的点，

如果对app定义了高度，如100%，可能出现白屏问题，这就需要 html，body，app都使用 height: 100%

Edited by JayChen