Полноэкранное окно просмотра карты открытых слоев

Question

У меня есть приложение angularjs с Angular Material, созданное с помощью генератора полного стека yeoman. В моем index.html есть панель навигации и пользовательский интерфейс для отображения содержимого сайтов.

<!-- 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, которую я хочу заполнить окно, но это не будет. Высота не всегда застойная. Существует также прямой маршрут для карты.

Установка высоты пользовательского интерфейса на 100% не работает, и это не совсем то, что мне нужно. Хотя карта должна быть на 100%, есть другие вещи, которые не должны загружаться в пользовательском интерфейсе. Пожалуйста, помогите мне получить эту карту, чтобы заполнить окно.

Map.html загружает директиву открытых слоев, найденную здесь. Я пытался использовать гибкие угловые материалы, но безуспешно. Очевидно, что есть способ сделать это, я просто новичок и добавил тэги height и / или flex ко всему, что я смог найти в DOM безуспешно.

Answer 1

У меня есть карта 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>

Внутри пользовательского интерфейса есть что-то вроде (или вы можете обернуть вашу карту открытых слоев в другой элемент):

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

Хитрость заключается в использовании position: absolute на [flex] дети.

РЕДАКТИРОВАТЬ

Я забыл что div с layout должен быть в полный рост.

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