html - 在 Materialize 布局中显示 OpenLayers map 的问题

Question

我在显示使用物化框架创建的布局内部的完整 map 时遇到问题。 我在页脚区域遇到问题，我无法弄清楚如何删除页脚区域中的空白区域。在更宽的屏幕上看起来像这样。

在较小的屏幕上它看起来像这样。

我试过这个:

.map {
 height: 100%;
 width:100%;
}

但没有任何运气。

此外，我想知道如何确定导航栏的优先级并将其放在 map 上方。

这里是 jsfiddle与描述的问题。赞你

Answer 1

.map {
 position:absolute;
 margin-top:100px;
 height: calc(100vh-100px);
 width:100vw;
 }

试试这个 css，我想它会让你的工作变得轻松。