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

Question

我在使用实体化框架创建的布局中显示完整地图时遇到问题。我在页脚区域遇到问题，我不知道如何删除页脚区域中的白色 space。在更宽的屏幕上看起来像这样。

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

我试过这个：

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

但没有运气。

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

这里是 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;
}

现在地图在定义的布局内正确缩放。

Issue with showing OpenLayers map inside Materialize layout