＆＃34;职位：固定＆＃34;与包含svg元素的div一起使用时会导致许多问题

Question

我有类似的东西：

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

这是一张地图。当我向下滚动时，我希望它保持在屏幕的顶部，就像通常使用表头一样。但是，如果我在CSS中使用“position：fixed”，则地图完全调整大小（缩小到一个很小的大小）并重新定位自己;它确实通过滚动来固定该位置，但是尺寸和位置是完全错误的，并且完全不对应于没有“位置：固定”的情况。

目前地图容器的CSS只是

margin: 0 20px;
height: 100%;

Answer 1

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

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