0

我有一个使用 yeoman 全栈生成器制作的 Angular Material 的 angularjs 应用程序。我的 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 加载在这里找到的开放层指令。我尝试使用有角材料的 flex 也没有成功。显然有一种方法可以做到这一点，我只是新手，并且在 DOM 中几乎可以找到的所有内容中都添加了高度和/或 flex 标签，但没有成功。

4

1 回答 1

1

我在 ui 视图中有一个全高 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>

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

编辑

我忘记了divwithlayout也必须是全高的。

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

于 2015-07-14T13:53:28.703 回答