Eckiges Materiallayout - zum Ausfüllen des Fensters erweitern

Question

Apr 15, 2015, 06:03 PM

Eckiges Materiallayout - zum Ausfüllen des Fensters erweitern

Ich versuche ein Angular-Materiallayout zu erstellen. Mein Ziel ist es, eine Seite zu erstellen, die das gesamte Browserfenster ausfüllt, ohne eine vertikale Bildlaufleiste zu erstellen. Am oberen Rand der Seite befindet sich eine Symbolleiste, die 100% der Seitenbreite einnimmt. Unter der Symbolleiste befindet sich ein Titelbereich, der ebenfalls 100% der Breite einnimmt. Unter dem Titelbereich möchte ich links ein Navigationsmenü und rechts einen Kundenbereich. Mein Ziel ist es, dass sowohl das Navigationsmenü als auch der Client-Bereich das gesamte Browser-Fenster vertikal ausfüllen.

Um Ihnen ein Bild von dem zu geben, was ich zu erreichen versuche:

Ich habe mit der Layoutzeile und -spalte zusammen mit den Attributen flex und layout-fill experimentiert. Jeder andere Beitrag, den ich gefunden habe, zeigt an, dass dies mit der richtigen Kombination möglich sein sollte, aber die Lösung ist mir entgangen. Ich habe einen Plunker erstellt, um mein Problem zu demonstrieren:

http: //plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t? p = info

Hier ist meine 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>

Und die main.html (wird in der ng-Ansicht angezeigt):

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

Natürlich, schauen Sie sich den Plunker an, um zu sehen, wie alles verdrahtet ist, und sehen Sie das Problem visuell.

Jede Hilfe wäre sehr dankbar!

PS. Ich habe diesen Plunker gerade auf IE 11 getestet und es treten andere Anzeigeprobleme auf. Aber das ist für eine andere Frage an einem anderen Tag. Es sollte korrekt in Chrome funktionieren. Außerdem wird das Menü bei Fenstern mit einer Breite von weniger als 600 Pixel automatisch ausgeblendet. Zum Anzeigen des Fensters vergrößern Sie das Plunker-Anzeigefenster.