Javascript Html<；部门>；动态调整大小，恼人的行为

我对web开发相当陌生，我在HTML中有以下内容：

<div id="map" style='width: 97vw; height: 76vh;
max-width:100%;
max-height:100%;
left: 0px;
top: 0px;
border-radius: 6px 6px 6px 6px;'></div>

我试图使div部分自动调整自己，正如前面多次讨论的那样，使用vw，vh似乎是这里最简单的解决方案

然而，当我拉伸页面的宽度时，我会得到“跳跃”，它不会不断地自动调整自己

这是在拉伸之前：

这是在拉伸一点之后：

我正在努力保持代码的整洁，因此，如果我只使用html就可以解决这个问题，那将是最好的（但是如果他们提供更快/更好的解决方案，我仍然会使用javascript、css等）

我的目标是让这个地图在整个屏幕结束之前总是以10px结尾，并且在用户拉伸页面时不断调整它的大小。最好的方法是什么

---

注：我知道类似的主题之前已经讨论过好几次，我已经浏览了它们的内容。然而，我不认为这是一个重复，因为我更关心的细节，如图像中描述的“跳跃”，我希望有一个特定的结束相对于屏幕的结束，而不仅仅是填充页面或有一个比例

嗯，我会用两个div。一个是高度为100%和宽度为100%的地图，另一个是高度为100%和固定高度的地图。林克：但我看到你需要相对页面的位置，所以我的答案是错误的。之所以会出现“跳跃”，是因为重新绘制地图的速度不够快。它确实需要在每次调整大小事件中从web加载更多数据，因此您需要一个相当快的连接和一台相当快的计算机，以使这一切顺利进行（具有足够高的帧率）。@Ernestas Stankevičius很好的建议，如果我想不出其他任何事情，我会这样做的谢谢您。@Lister先生，但问题是我在其他时间段都没有这种跳跃。例如，当它变小，我想把地图翻一番时，它只是不断地这样做。只有当贴图具有一定宽度时才会发生跳跃。由于两种情况下的连接速度和要下载的附加数据是相同的，我不确定这是否是原因。如果这就是问题所在，在我等了一段时间后，第一张照片应该已经伸展了，但它没有。它只会随着拉伸而改变，所以问题一定出在