完整 window ui-openlayers 地图视图

Question

我有一个 angularjs 应用程序 Angular Material 使用 yeoman fullstack 生成器制作。我的 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> 我想填充 window 的 openlayers 地图，但它不会。高度并不总是停滞不前。地图也有直达路线。

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

map.html 加载发现 here. I tried to use flex from angular material 的开放层指令也没有成功。显然有一种方法可以做泰语，我只是新手，并且已将高度 and/or flex 标签添加到我在 DOM 中找到的几乎所有内容，但没有成功。

Answer 1

我在 ui-view 中有一个完整的 openlayers 地图，使用 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 地图包装到另一个元素中）：

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

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

编辑

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

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

完整 window ui-openlayers 地图视图

Full window ui-view of openlayers map

html

css

angularjs

angular-material

angular-openlayers