Я пытаюсь создать макет материала Angular. Моя цель - создать страницу, которая заполняет все окно браузера, не создавая вертикальной полосы прокрутки. Вверху страницы находится панель инструментов, занимающая 100% ширины страницы. Под панелью инструментов находится область заголовка, которая также занимает 100% ширины. Под областью заголовка я хотел бы, чтобы слева было навигационное меню, а справа - клиентская область. Моя цель - сделать так, чтобы и навигационное меню, и клиентская область заполняли по вертикали все окно браузера.
Чтобы дать вам наглядное представление о том, что я пытаюсь достичь: 
Я экспериментировал с строкой и столбцом макета вместе с атрибутами flex и layout-fill. Все остальные сообщения, которые я нашел, указывают на то, что это должно быть возможно при правильной комбинации, однако решение ускользало от меня. Я создал Plunker, чтобы продемонстрировать свою проблему:
http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info
Вот мой index.html:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>adasd</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<md-toolbar layout="row" class="md-hue-3">
<div flex="15" layout layout-align="center center" >
<span>Logo</span>
</div>
<div flex="85" layout layout-align="center center" >
<span>Toolbar Header</span>
</div>
</md-toolbar>
<div flex >
<div ng-view flex layout-fill></div>
</div>
<!-- Angular Material Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
И main.html (отображается в ng-view):
<div layout="column" flex layout-fill>
<div layout="row" flex layout-fill>
<md-whiteframe flex="100" layout layout-align="center center" style="margin-bottom: 16px;height: 60px;">
<div flex="100"><span id="site-name">Some sort of a title goes here...</span></div>
</md-whiteframe>
</div>
<div layout="row" flex layout-fill>
<md-sidenav layout-fill class="md-sidenav-left " id="siteMenu" md-component-id=" left" md-is-locked-open="$mdMedia('gt-sm')">
<md-content layout-fill role="navigation">
<ul class="docs-menu">
<li ng-repeat="section in sections" class="parent-list-item">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
</li>
<li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
<ul ng-if="section.children" class="menu-nested-list">
<li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
<menu-toggle section="child"></menu-toggle>
</li>
</ul>
</li>
</ul>
</md-content>
</md-sidenav>
<md-content layout="row" class="content-wrapper md-padding" flex layout-fill id="content">
<div flex layout-fill>
<h2>Home Content</h2>
<ul>
<li>Page Content goes here...</li>
<li>and here...</li>
<li>and here...</li>
</ul>
</div>
</md-content>
</div>
</div>
Конечно, посмотрите на Plunker, чтобы увидеть, что все соединено вместе, и визуально увидеть проблему.
Любая помощь будет принята с благодарностью!
PS. Я только что протестировал этот Plunker в IE 11, и у него есть другие проблемы с отображением. Но это уже другой вопрос, в другой день. Он должен корректно работать в Chrome. Кроме того, меню будет автоматически скрываться в окнах шириной менее 600 пикселей. Чтобы отобразить окно, сделайте окно отображения Plunker шире.
<div flex style="height: -webkit-calc(100% - 76px)"> <div ng-view flex layout-fill style="height: 100%"></div> </div>- person Mordred schedule 15.04.2015height: 100vhиwidth: 100vw, примененные к элементу, гарантируют, что этот элемент имеет полную ширину и высоту области просмотра. Добавлениеposition: absoluteиleft: 0,top: 0гарантирует, что он находится в верхнем левом углу. Не уверен, решит ли это проблему или нет. - person Benjamin Solum schedule 14.07.2015layout-fillна самом деле работает в angular-material: stackoverflow.com/questions/29002473/ Посмотрите там, и это может помочь. - person kavare schedule 11.08.2016