我在webclip中 有一个全屏页面 内嵌一个iframe
外部页面 body position设置为fixed时候
body 能够铺满页面
但是iframe 无论怎么样设置 都无法填满body
底部会有一个空白区域
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<style>
html{
height:100vh
}
body, iframe{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0
}
<style/>
</head>
<body>
<iframe></iframe>
</body>
</html/>
也就是 当body position fixed时候 它的内部内容空间的高度存在bug
所以不要用这种方式全屏
修复：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
外加：
<style type="text/css" rel="stylesheet"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100vh; position: relative; overflow: hidden; } </style>