openlayers 地图的全窗口 ui-view

Question

我有一个带有 Angular Material 的 angularjs 应用程序，它是用 yeoman 全栈生成器制作的。我的 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 地图，我想填充窗口但它不会。高度并不总是停滞不前。地图上还有一条直达路线。

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

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

Answer 1

我在 ui-view 中有一个全高的 openlayers 地图，使用角度材料和类似于您需要的工具栏：

确保您已将 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 地图包装到另一个元素中）：

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

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

编辑

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

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