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