在Materialize布局中显示OpenLayers地图的问题

Question

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

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

我试过这个：

{{1}}

但没有任何运气。

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

以下是jsfiddle描述的问题。谢谢你

Answer 1

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

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

Answer 2

有点迟到的答案，但在这里：

我只是为标题，主页和页脚部分添加了flex 1 0 auto

header, main, footer {
    padding-left: 300px;
    flex: 1 0 auto;
}

对于正文部分，我添加了display: flex; attribute

像这样：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

现在，map在定义的布局中正确缩放。