Html 角材料布局 - 展开以填充窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29655242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular material layout - expand to fill window
提问by Briz
I am attempting to create an Angular material layout. My goal is to create a page where it fills the entire browser window without creating a vertical scroll bar. At the top of the page is a toolbar that consumes 100% of the width of the page. Under the toolbar is a title area that also consumes 100% of the width. Under the title area I would like a nav menu on the left and a client area on the right. My goal is to have both the nav menu and the client area fill vertically the entire browser window.
我正在尝试创建一个 Angular 材质布局。我的目标是创建一个页面，在其中填充整个浏览器窗口而不创建垂直滚动条。页面顶部是一个工具栏，占页面宽度的 100%。工具栏下方是一个标题区域，它也占用了 100% 的宽度。在标题区域下，我希望左侧有一个导航菜单，右侧有一个客户区。我的目标是让导航菜单和客户区垂直填充整个浏览器窗口。
To give you a visual of what I am trying to accomplish:
为了让您了解我要完成的工作：
I have been experimenting with the layout row and column along with the attributes flex and layout-fill. Every other post that I have found indicates that this should be possible with the right combination however the solution has eluded me. I have created a Plunker to demonstrate my problem:
我一直在试验布局行和列以及属性 flex 和 layout-fill。我发现的所有其他帖子都表明，通过正确的组合应该可以做到这一点，但是我没有找到解决方案。我创建了一个Plunker来演示我的问题：
http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info
http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info
Here is my index.html:
这是我的 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>
And the main.html (gets displayed in the ng-view):
而 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>
Of course, look at the Plunker to see everything wired together and visually see the problem.
当然，看看Plunker，看看所有连接在一起的东西，并直观地看到问题。
Any help would be greatly appreciated!
任何帮助将不胜感激！
PS. I just tested this Plunker on IE 11 and it is having other display issues. But that is for another question another day. It should work correctly on Chrome. Also, the menu will auto hide on windows less than 600px wide. To show the window, make the Plunker display window wider.
附注。我刚刚在 IE 11 上测试了这个 Plunker，它还有其他显示问题。但那是另一天的另一个问题。它应该在 Chrome 上正常工作。此外，菜单将在宽度小于 600 像素的窗口上自动隐藏。要显示窗口，请使 Plunker 显示窗口更宽。
采纳答案by Jesús Carrera
You can also do it without adding extra styles just using the Angular Material elements.
您也可以只使用 Angular Material 元素，而无需添加额外的样式。
Basically you need to add layoutto all the parents of the elements you want to fill vertically. You also don't need to use so many layout-fills.
基本上，您需要添加layout到要垂直填充的元素的所有父级。您也不需要使用这么多layout-fills。
Here the demo: http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview
这里的演示：http: //plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview
I also added a background color to the sidebar to demonstrate that it also fills vertically.
我还在侧边栏添加了背景颜色，以证明它也垂直填充。
回答by Christine268
<div flex style="height: -webkit-calc(100% - 76px)">
<div ng-view flex layout-fill style="height: 100%">
</div>
</div>
Just thought that this answer should go in an answerto make it easier for others.
只是认为这个答案应该放在一个答案中，以便其他人更容易。
回答by Justin Pavatte
Simple Example:
简单示例：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="MyApp" layout="column" ng-cloak>
<div flex layout="row" layout-align="center center" style="background: plum;">
<div>page filled and content centered</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script>
angular.module("MyApp", ["ngMaterial"]);
</script>
</body>
</html>
Output:
输出：
