小编Bri*_*riz的帖子

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

我正在尝试创建一个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; …

Run Code Online (Sandbox Code Playgroud)

html css material angularjs

Bri*_*riz

2015 04-16

38
推荐指数

3
解决办法

6万
查看次数