Html 角度材质布局-展开以填充窗口_Html_Css_Angularjs_Angularjs Material

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

html css angularjs

Html 角度材质布局-展开以填充窗口,html,css,angularjs,angularjs-material,Html,Css,Angularjs,Angularjs Material,我正在尝试创建一个有角度的材质布局。我的目标是创建一个页面，在该页面中，它将填充整个浏览器窗口，而无需创建垂直滚动条。页面顶部是一个工具栏，它占用了页面宽度的100%。工具栏下是一个标题区域，它也占用了100%的宽度。在标题区下，我想在左边有一个导航菜单，在右边有一个客户区。我的目标是让导航菜单和客户端区域垂直填充整个浏览器窗口让您了解我正在努力实现的目标：我一直在试验布局行和列以及属性flex和布局填充。我发现的其他每一篇帖子都表明，通过正确的组合，这应该是可能的，但解决方案一直没有找到

我正在尝试创建一个有角度的材质布局。我的目标是创建一个页面，在该页面中，它将填充整个浏览器窗口，而无需创建垂直滚动条。页面顶部是一个工具栏，它占用了页面宽度的100%。工具栏下是一个标题区域，它也占用了100%的宽度。在标题区下，我想在左边有一个导航菜单，在右边有一个客户区。我的目标是让导航菜单和客户端区域垂直填充整个浏览器窗口

让您了解我正在努力实现的目标：

我一直在试验布局行和列以及属性flex和布局填充。我发现的其他每一篇帖子都表明，通过正确的组合，这应该是可能的，但解决方案一直没有找到。我创建了一个Plunker来演示我的问题：

这是我的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视图中）：


这里有个标题。。。


{{section.name}}


{{section.name}}






家庭内容

页面内容放在这里
在这里
在这里

当然，看看Plunker，可以看到所有连接在一起的东西，并直观地看到问题所在

任何帮助都将不胜感激

另外，我刚刚在IE11上测试了这个插件，它还有其他显示问题。但这是另一个问题，改天再说。它应该能在铬上正常工作。此外，在宽度小于600px的窗口上，菜单将自动隐藏。要显示窗口，请将Plunker显示窗口加宽。


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

我只是认为这个答案应该包含在一个答案中，让其他人更容易理解。

你也可以这样做，而不需要添加额外的样式，只需要使用角度材质元素

基本上，您需要向要垂直填充的元素的所有父元素添加

layout

。您也不需要使用如此多的

布局填充
下面是演示：
我还向侧边栏添加了背景色，以证明它也垂直填充。
简单示例：
<!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>


页面已填充且以内容为中心
角度模块（“MyApp”、[“ngMaterial”]）；

输出：
<!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>

我让它正常工作，但当我试图编辑plunker时，它丢失了。这应该会让你朝着正确的方向开始（我只是没有时间去弄清楚我现在到底做了什么）：
谢谢Mordred，这很有效。我在两个元素上都添加了您建议的样式。这使得菜单和客户端区域都扩展到整个窗口。它还增加了标题区域，但这很容易用flex=“10”属性修复。我猜要兼容所有浏览器，我还需要添加-moz-calc（100%-76px）和-o-calc（100%-76px）以及calc（100%-10px）？我不知道opera是否支持它，但你肯定需要其他浏览器。另外，我不确定移动设备上的calc支持是什么。更多信息请参见：您是否熟悉<代码>高度：100vh

和

宽度：100vw

应用于元素将确保该元素为视口的全宽和全高。添加

position:absolute

和

left:0

，

top:0

将确保它位于左上角。不确定这是否能解决问题。我在这个问题中的回答是为了阐明

布局填充

在棱角材料中的实际工作原理：看看那里，它可能会有所帮助。段落“基本上，您需要向要垂直填充的元素的所有父元素添加布局。您也不需要使用如此多的布局填充。“这是我让视图正常工作的关键。谢谢。”基本上，您需要将布局添加到要垂直填充的元素的所有父元素中。“-这就是重点。