env(safe-area-inset-bottom) 在 css 中不起作用
[英]env(safe-area-inset-bottom) not working in css
问题描述
I can't get env() to work.
我无法让env()工作。
* { padding: 0; margin: 0; } .testclass { background-color: green; padding-bottom: env(safe-area-inset-bottom); }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="testclass">Hello there</div> </body> </html>
This is what it looks like:这是它的样子：
Adding the padding with padding-bottom: 50px works as expected:使用padding-bottom: 50px添加填充按预期工作：
What am I doing wrong here?我在这里做错了什么？
EDIT: I figured it mostly out (see answer), but it's still not working when adding the website to the home screen.编辑：我主要是想通了（见答案），但是将网站添加到主屏幕时它仍然无法正常工作。
1 个解决方案
解决方案1
0 已采纳 2022-07-15 06:42:53
Turns out: for env(safe-area-inset-bottom) to work, hiding the bottom bar by using the "hide toolbar" option won't work .事实证明：为了env(safe-area-inset-bottom)工作，使用“隐藏工具栏”选项隐藏底栏是行不通的。 Instead, it has to disappear through scrolling.相反，它必须通过滚动消失。
It appears that for it to work the body itself has to scroll (so no height: 100% or overflow: scroll in any parent.看来，要使其正常工作，主体本身必须滚动（因此没有height: 100%或overflow: scroll 。
* { padding: 0; margin: 0; } .testclass { margin-top: 100px; background-color: green; padding-bottom: env(safe-area-inset-bottom); }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1, viewport-fit=cover" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="wrapper"> <div class="testclass">Hello there</div> </div> <div style="height: 120vh"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.