Угловая раскладка материала - разверните, чтобы заполнить окно

Question

Apr 15, 2015, 06:03 PM

Угловая раскладка материала - разверните, чтобы заполнить окно

Я пытаюсь создать угловую раскладку материала. Моя цель - создать страницу, которая заполняет все окно браузера, не создавая вертикальную полосу прокрутки. В верхней части страницы находится панель инструментов, которая потребляет 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-представлении):

<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. Я только что протестировал этот Plunker на IE 11, и у него возникают другие проблемы с отображением. Но это для другого вопроса в другой день. Он должен работать правильно на Chrome. Кроме того, меню будет автоматически скрываться на окнах шириной менее 600 пикселей. Чтобы показать окно, сделайте окно отображения Plunker шире.

Комментировать

Угловая раскладка материала - разверните, чтобы заполнить окно

Ответы на вопрос(0)

Ваш ответ на вопрос

Популярные вопросы