Question

我正在使用Mapboxgl，Bootstrap 4和React渲染地图。

我需要地图占据页面高度的100％并显示在两列网格的第一列中。

但是，当使用React时，地图的宽度会扩展到该行宽度的100％-在第二列下方重叠。

最好的办法是检查我在jsfidle上的示例以了解我的意思。

正确显示地图（使用纯HTML且不使用React时） https://jsfiddle.net/apphancer/jhxy5c63/

显示宽度问题的地图（使用React时） https://jsfiddle.net/apphancer/9g71ovn6/

为了使100％的高度正常工作，我正在使用以下CSS：

#login

我怀疑这可能与使用React如何渲染地图有关，因为使用纯HTML解决方案时不会发生此问题。

有人能指出正确的方向吗？

HTML

.map-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

CSS

<div id="app"></div>

JS

body, html {
    height: 100%;
}

#app, .row, .col-9 {
    height: 100%;
}

.col-3 {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid red;
}

.map-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Answer 1

如果在包装纸中使用宽度固定为100％的位置，它将覆盖所有宽度。但是，如果将位置设置为相对，则它将仅覆盖剩余宽度。

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

这在您的react-jsfiddle中起作用。请尝试。

Answer 2

如果您在项目中使用位置fixed，则可以覆盖整个区域，因此您有2个解决方案

第一个解决方案

将75%的宽度赋予#map，使其表现得像col-9，而无需给出position: absolute;

#map {
    width: 75%;
    height: 100%;
}

第二个解决方案

赋予它相对于元素父级的相对位置，使其不能离开其区域，因为您可以将position: fixed更改为position: relative

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

两种解决方案都是很好的解决方案，但从我的角度来看，我更喜欢第二种解决方案。

Answer 3

const [viewport, setViewport] = useState({ 宽度: '100%', height: 'calc(100vh - 162px)', // 162px 是地图顶部所有元素的大小高度纬度：0，经度：0, 缩放：12，轴承：0，音高：0，过渡时间：2000， transitionInterpolator: 新的 FlyToInterpolator(), });

使用React渲染时Mapbox地图100％高的问题

3 个答案: