javascript - "position: fixed"与包含 svg 元素的 div 一起使用时会导致许多问题

Question

我有这样的东西:

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

这是一张 map 。当我向下滚动时，我希望它停留在屏幕顶部，就像通常使用表格标题所做的那样。但是，如果我在 CSS 中使用“position: fixed”，那么 map 会完全调整大小(缩小到很小的尺寸)并重新定位自己；它确实通过滚动保持该位置固定，但是大小和位置是完全错误的，并且根本不对应于没有“位置:固定”的情况。

目前 map-container 的 CSS 只是

margin: 0 20px;
height: 100%;

Answer 1

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

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