我有一个 DIV 元素，我希望它显示为浏览器的完整尺寸，但会有一些填充和圆角。这部分很简单，但我希望当键盘显示为新视口的大小时调整它的大小。我可以使用 window.visualViewport.height 使用 Javascript 很好地做到这一点。问题是某些浏览器没有提供完全正确的大小，因此 DIV 无法正确显示。有没有办法用纯 CSS 或其他适用于所有浏览器的方式来做到这一点？
一种解决方案是使用viewport，它是表示当前可见区域的动态值。vh是高，并且vw是宽度，两者都等于屏幕高度/宽度的 1%。
通过这种方法，当软键盘打开时，这个区域就会缩小，你的容器也会缩小。
首先，添加此元标记，以便视口代表实际设备尺寸，而不是放大尺寸：
<meta name="viewport" content="width=device-width">
接下来，只需设置高度以使用屏幕高度：
height: 100vh;
如果你想扣除固定的空间量，那么你可以使用calc, e.g:
height: calc(100vh - 0.5rem)
根据您的屏幕截图，这是一个示例：
.container {
background: #e3e3e3;
border-radius: 0.5rem;
height: calc(100vh - 1rem);
width: calc(100% - 1rem);
margin: 0 auto;
}<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container"></div>
</body>