角度材质布局 - 展开以填充窗口答案

【问题标题】：Angular material layout - expand to fill window角度材质布局 - 展开以填充窗口
【发布时间】：2015-06-21 17:02:22
【问题描述】：

我正在尝试创建 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。我刚刚在 IE 11 上测试了这个 Plunker，它还有其他显示问题。但那是另一天的另一个问题。它应该在 Chrome 上正常工作。此外，菜单将在宽度小于 600 像素的窗口上自动隐藏。要显示窗口，请将 Plunker 显示窗口变宽。

【问题讨论】：

我有这个工作，然后当我试图编辑 plunker 时，我失去了它。这应该会让你朝着正确的方向开始（我只是没有时间弄清楚我现在做了什么）：<div flex style="height: -webkit-calc(100% - 76px)"> <div ng-view flex layout-fill style="height: 100%"></div> </div>
谢谢莫德雷德，这行得通。我在这两个元素上添加了您建议的样式。这使得菜单和客户区都扩大到填满整个窗口。它还增加了标题区域，但这很容易用 flex="10" 属性修复。我猜想与所有浏览器兼容，我还需要添加 -moz-calc(100% - 76px) 和 -o-calc(100% - 76px) 和 calc(100% - 10px)？
我不知道opera是否支持它，但你肯定需要其他的。另外，我不确定移动设备上的 calc 支持是什么。在此处查看更多信息：developer.mozilla.org/en-US/docs/Web/CSS/…
你熟悉viewport CSS units吗？ height: 100vh 和 width: 100vw 应用于元素将确保该元素是视口的完整宽度和高度。添加position: absolute 和left: 0，top: 0 将确保它位于左上角。不确定这是否能解决问题。
我已经回答了这个问题，以阐明 layout-fill 在角度材料中的实际工作原理：stackoverflow.com/questions/29002473/… 看看那里，它可能会有所帮助。

标签： html css angularjs angularjs-material

【解决方案1】：

您也可以在不添加额外样式的情况下仅使用 Angular Material 元素来做到这一点。

基本上你需要将layout添加到你想要垂直填充的元素的所有父元素中。你也不需要用那么多layout-fills。

这里是演示：http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

我还为侧边栏添加了背景颜色，以证明它也可以垂直填充。

【讨论】：

段落“基本上你需要为你想要垂直填充的元素的所有父元素添加布局。你也不需要使用这么多的布局填充。”是让我的观点发挥作用的关键。谢谢。
“基本上你需要为你想要垂直填充的元素的所有父元素添加布局。” - 这就是重点。

【解决方案2】：

<div flex style="height: -webkit-calc(100% - 76px)">
    <div ng-view flex layout-fill style="height: 100%">
    </div>
</div>

只是认为这个答案应该放在一个答案中，以便其他人更容易。

【讨论】：

【解决方案3】：

简单示例：

<!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>

输出：

【讨论】：