我正在尝试在我的应用程序中做类似下面代码的事情，我想在移动浏览器中工作，这个想法是页面的内容保持在 2 个绝对定位的容器之间，如果不滚动则应该滚动一个是标题栏，一个是键盘元素。
此代码在使用 chrome 开发工具模拟手机时运行良好，它也适用于 iPhone 和 Android 的 Chrome 浏览器，并且似乎适用于苹果浏览器（无论是什么），但三星浏览器似乎不起作用，并且内容只是在键盘下进行而无需滚动我使用 SVH 作为高度，因为手机浏览器不会直观地报告 100vh，这感觉是一个很好的方法，但是有没有更好的方法，或者有什么方法可以做到这一点适用于所有主要手机浏览器？
<html>
<style>
.bar {
width: 100vw;
align-items: center;
display: flex;
position: absolute;
top: 0;
height: 40px;
background: #000000;
}
.content {
margin-top: 45px;
display: block;
overflow-y: scroll;
height: calc(100dvh - 445px);
}
.keyboard {
width: 100vw;
position: absolute;
bottom: 0px;
height: 400px;
background: green;
}
</style>
<body>
<div class="bar">
Top
</div>
<div class="content">
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>fish</div>
<div>Cheese</div>
</div>
<div class = "keyboard">
Keyboard
</div>
</body>
</html>