javascript - “位置：固定”与包含 svg 元素的 div 一起使用时会导致许多问题

Question

我有这样的事情：

<div id="map-container">
    <svg id="map" height="450" preserveAspectRatio="xMidYMid meet">
        // Stuff
    </svg>
</div>

这是一张地图。当我向下滚动时，我希望它保持在屏幕顶部，就像通常使用表格标题一样。但是，如果我在 CSS 中使用“位置：固定”，那么地图会完全调整大小（缩小到很小的大小）并重新定位自己；它确实通过滚动保持该位置固定，但大小和位置完全错误，根本不符合没有“位置：固定”的情况。

目前地图容器的 CSS 只是

margin: 0 20px;
height: 100%;

Answer 1

您是否尝试设置地图容器的大小属性？尝试做这样的事情。

#map-container {
  margin: 0 20px;
  height: 450px;
  width: 100%; // or any desired width
}