html - openlayers map 的全窗口ui View

Question

我有一个 angularjs 应用程序，其中包含使用 yeoman 全栈生成器制作的 Angular Material。我的 index.html 有一个导航栏和一个 ui-view 来显示网站内容。

<!-- index.html --!>
<!-- Add your site or application content here -->
<div ng-include="'components/navbar/navbar.html'"></div>
<div ui-view></div>

main.html 页面加载:<div ng-include="'app/map/map.html'"></div>我想填充窗口的 openlayers map ，但它不会。高度并不总是停滞不前。 map 也有直达路线。

将 ui-view 的高度设置为 100% 不起作用，这也不是我所需要的。虽然 map 应该是 100%，但在 ui-view 中加载的其他东西不应该。请帮我把这张 map 填满窗口。

map.html 加载找到的开放层指令 here .我尝试使用 angular material 中的 flex也没有成功。显然有一种方法可以做泰语，我只是新手，并且已经为我在 DOM 中找到的几乎所有内容添加了高度和/或 flex 标签，但没有成功。

Answer 1

我在 ui View 中有一个全高 openlayers map ，使用的是 Angular Material ，工具栏类似于您需要的:

确保将 body 和 html 设置为 height: 100%;

<div layout="column" style="height: 100%">
    <div ng-include="'components/navbar/navbar.html'"></div>
    <ui-view flex style="position:relative;"></ui-view>
</div>

在 ui-view 里面有类似的东西(或者你可以将你的 openlayers map 包装到另一个元素中):

<openlayers style="position: absolute" width="100%" height="100%">        
</openlayers>

诀窍是在 [flex] 子级上使用 position: absolute。

编辑

我忘记了 div 和 layout 也必须是全高。

jsfiddle:http://jsfiddle.net/kvetis/k3wm4tzp/3/