如何使用Angular-Material獲得完整高度的sidenav

我正在使用Angular-Material並已實施SideNav菜單。當屏幕尺寸很小時，菜單被隱藏，當點擊菜單切換按鈕時，菜單從左側滑出，具有整頁高度。當屏幕較大時，菜單固定在左側，但不是全頁高度。如何使用Angular-Material獲得完整高度的sidenav

如何使固定菜單顯示爲整頁高度。我一直在玩css和其他md屬性，但只是無法找到如何。

<div ng-controller="appCtrl" layout="vertical" layout-fill> 

<md-toolbar class="md.medium-tall app-toolbar"> 
    <div class="md-toolbar-tools" ng-click="toggleMenu()"> 
     <button class="menu-icon" hide-sm aria-label="Toggle Menu"> 
      <md-icon icon="img/icons/ic_menu_24px.svg"> 
       <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object> 
      </md-icon> 
     </button> 
     <h2> 
      <span>Dev.Material</span> 
     </h2> 
    </div> 
</md-toolbar> 

<section layout="horizontal" flex> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')"> 

     <md-toolbar md-theme="purple"> 
      <h1 class="md-toolbar-tools">Sidenav Left</h1> 
     </md-toolbar> 

     <md-content class="md-padding" ng-controller="menuCtrl"> 
      <p> 
       This sidenav is locked open on your device. To go back to the default behavior, 
       narrow your display. 
      </p> 
     </md-content> 
    </md-sidenav> 

    <md-content flex class="md-padding"> 
     Some content !! 
    </md-content>

和控制器：

(function() { 
'use strict'; 

var controllerId = 'appCtrl'; 
angular.module('app').controller(controllerId, 
    ['$scope', '$timeout', '$mdSidenav', appCtrl]); 

function appCtrl($scope, $timeout, $mdSidenav) { 
    var vm = this; 

    $scope.toggleMenu = function() { 
     $mdSidenav('menu').toggle(); 
    }; 
};  
})(); 

(function() { 
'use strict'; 

var controllerId = 'menuCtrl'; 
angular.module('app').controller(controllerId, 
    ['$scope', '$timeout', '$mdSidenav', menuCtrl]); 

function menuCtrl($scope, $timeout, $mdSidenav) { 
    var vm = this; 

    $scope.close = function() { 
     $mdSidenav('menu').close(); 
    }; 
}; 
})();

來源

2014-11-01 James

您可能想要包括您期望在此支持的瀏覽器...有可能使用vh（視口高度）的解決方案，但這在舊版本的CSS中不可用。或者，您可以使用一個指令來監視任何調整大小的事件，並使用offsetHeight或者screen.height捕獲元素的更新高度並將其存儲在某個地方（值或服務或工廠） – shaunhusain 2014-11-01 14:06:52

這個工作對我來說...

1）環繞你sidenav在具有佈局一個div = 「垂直」像這樣...

<div ng-include="'scripts/shared/sidenav/sidenav.html'" layout="vertical"></div>

2）在你的sidenav中添加「flex」，這樣它就會彈性地填充整個頁面的高度。

<md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$mdMedia('sm')" flex>

來源

2014-11-17 06:14:01

這對我有效，而另一個答案沒有。 – 2015-05-15 19:51:37

在較新的版本中，您可能會看到：*「$ media is is being used for is-locked-open。Use $ mdMedia instead」*。在這種情況下，使用這個'is-locked-open =「$ mdMedia（'sm'）」' – 2015-05-26 07:26:26

THANK LORD !!!!! – petur 2015-11-03 11:39:13

我對角材料0.6.0 rc1有完全相同的問題。（我使用了demo site的代碼）。

該問題不是來自角材料代碼，而是來自您的頁面的父級CSS容器，它不是全高。

你的頁面應該有這樣的結構：

<ui-view class="ng-scope"> 
    <div ng-controller="appCtrl" layout="vertical" layout-fill> 
     ... your md sidenav code here ... 
    </div> 
</ui-view>

問題來自於NG-scope類至極是不是滿的高度。在我來說，我只是複製/粘貼從demo site的代碼，並添加該即時通訊我對自定義的CSS文件

.ng-scope { height: 100%; }

結果是一個全高sidenav兩個鎖定開放和解鎖模式工作的罰款。

來源

2014-11-23 13:43:32 Elijun

不應該是'layout =「列」'而不是'layout =「vertical」'？ – demisx 2014-12-27 17:06:53

'layout =「列」'不再有效。使用更新版本的角度材料時，應該使用'layout =「vertical」'或'layout =「horizontal」'。 – 2015-02-03 17:01:40

截至0.8.3（今日）：https：//material.angularjs。org /＃/ layout/container（即行/列） – 2015-04-09 14:04:38

只需創建一個<div>以外的sidenav。例如，就在<body>標籤後，你可以寫：

<body layout="row"> 
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-md')"> 
    <md-toolbar md-theme="deep-orange"> 
     <h2 class="md-toolbar-tools">Menu</h2> 
    </md-toolbar> 
    <md-content ng-controller="menuBar" md-theme="deep-orange"> 
     <md-button layout-align="left" ng-repeat="item in items" ui-sref="{{item.location}}" class="menu-item" 
     md-ink-ripple="#bbb" aria-hidden="false"> 
<!-- the above <md-button> just repeats buttons created in the JS --> 
     <span>{{item.label}}</span> 
     </md-button> 
    </md-content> 
</md-sidenav> 
<!-- Other content ... --> 
</body>

此代碼會給你一個完全垂直的側欄。

來源

2015-01-09 14:16:59

我加入一個類來我sidenav與

position: fixed;

來源

2015-04-02 00:04:33

'md-sidenav {position：fixed}'和'md-backdrop.md-opaque {position：fixed}'對我來說是一個快速簡單的修復。謝謝@phil_Igr – 2016-07-27 17:58:15

+ million - >花了我一天的時間纔得到這個'固定' – 2017-01-22 15:21:00

嘗試增加對主要md-content標籤已經ui-view屬性設置layout-fill屬性修正了這個同樣的問題。

3210

來源

2015-05-27 08:01:35 sajmons

確保父容器也有適當標記的佈局填充。 – 2016-12-30 18:38:33

您需要在側邊欄和內容都使用flex，以及頂部容器。這樣您就不需要使用任何其他樣式。

這裏工作你的代碼正確（注意，我更新的某些部分最新角材質的版本）：

<div ng-controller="appCtrl" layout="column" flex> 

<md-toolbar class="md.medium-tall app-toolbar"> 
    <div class="md-toolbar-tools" ng-click="toggleMenu()"> 
     <button class="menu-icon" hide-sm aria-label="Toggle Menu"> 
      <md-icon icon="img/icons/ic_menu_24px.svg"> 
       <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object> 
      </md-icon> 
     </button> 
     <h2> 
      <span>Dev.Material</span> 
     </h2> 
    </div> 
</md-toolbar> 

<section layout="row" flex> 
    <md-sidenav flex class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"> 

     <md-toolbar md-theme="purple"> 
      <h1 class="md-toolbar-tools">Sidenav Left</h1> 
     </md-toolbar> 

     <md-content class="md-padding" ng-controller="menuCtrl"> 
      <p> 
       This sidenav is locked open on your device. To go back to the default behavior, 
       narrow your display. 
      </p> 
     </md-content> 
    </md-sidenav> 

    <md-content flex class="md-padding"> 
     Some content !! 
    </md-content> 
</section> 
</div>

來源

2015-08-28 16:07:59

這是爲我工作的人（在Angular Material 1.0.5上），其他人都沒有使用最新的更新。 – Jascination 2016-02-05 19:24:02

沒有爲我工作的角度材料版本以上的：1.1.0- RC.5，所以我做了這樣的：

<body layout="column"> 

<div layout="row" ng-controller="reviewController" ng-cloak flex> 

    <div layout="row"> 
      <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')" md-whiteframe="4" layout="column"> 
      <md-toolbar class="md-theme-indigo" class="md-medium-tall"> 
       <h1 class="md-toolbar-tools">Sidenav Left</h1> 
      </md-toolbar> 
      <div ng-controller="LeftCtrl"> 
       <md-button ng-click="close()" class="md-primary" hide-gt-sm> 
        Close Sidenav Left 
       </md-button> 
       <p hide show-gt-sm flex> 
        This sidenav is locked open on your device. To go back to the default behavior, narrow your display. 
       </p> 
       <p flex> 
        hi 
       </p> 
       <p flex> 
        there! 
       </p> 
      </div> 
     </md-sidenav> 
     <div layout-column flex> 

      <p flex> 
       The left sidenav will 'lock open' on a medium (>=960px wide) device. 
      </p> 
      <p flex> 
       The right sidenav will focus on a specific child element. 
      </p> 
      <div flex> 
       <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-sm> 
        Toggle left 
       </md-button> 
      </div> 
      <div flex> 
       <md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary"> 
        Toggle right 
       </md-button> 
      </div> 

      <md-content ui-view layout="column" flex></md-content> 
     </div> 
     <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right"> 
      <md-toolbar class="md-theme-light"> 
       <h1 class="md-toolbar-tools">Sidenav Right</h1> 
      </md-toolbar> 
      <md-content ng-controller="RightCtrl" layout-padding> 
       <form> 
        <md-input-container> 
         <label for="testInput">Test input</label> 
         <input type="text" id="testInput" ng-model="data" md-autofocus> 
        </md-input-container> 
       </form> 
       <md-button ng-click="close()" class="md-primary"> 
        Close Sidenav Right 
       </md-button> 
      </md-content> 
     </md-sidenav> 
    </div> 
</div>

上面的代碼作爲在安古拉給出幾乎相同[R材料文檔和的js文件也類似於文檔:)給出
編輯：
更多的參考資料：
1. https://gist.github.com/epelc/6aa345f4496776569830。的$media('gt-lg')的折舊值修正爲$mdMedia('gt-sm')
2. https://github.com/angular/material/issues/1092

來源

2016-07-15 12:17:00

上述問題只是通過修改CSS和無需更改任何代碼解決。

解決方案- .ng-scope {height：100％; }

來源

2016-08-10 08:41:12 Manpreet

<div layout="column" layout-fill> 
<section layout="row" flex> 
    <md-sidenav class="md-sidenav-left" 
       md-component-id="left" 
       md-is-locked-open="$mdMedia('gt-md')" 
       md-disable-backdrop 
       md-whiteframe="4"> 

     <md-content> 
      <div layout="row" layout-align="center center"> 
       <md-button ng-click="closeSideNav()" class="md-primary"> 
        Agregar Zona + 
       </md-button> 
      </div> 

      <p hide show-gt-md> 
       This sidenav is locked open on your device. To go back to the default behavior, 
       narrow your display. 
      </p> 
     </md-content> 
    </md-sidenav> 
</section>

測試

來源

2016-11-11 21:01:45 Vesper

我有一個類似的問題。設置風格「高度：100vh;」爲我工作。你也可以使用一個班級。

<div layout="column" style="height:100vh;"></div>

layout =「vertical」也可以使用 - 它在我的上下文中沒有任何顯着的效果。

來源

2017-02-27 18:33:52 phil

我試過很多事情來解決這個問題，我終於能夠通過直接添加的UIView我的菜單組件進行修復： <menu uiview layout="column" class="menu"> </menu>

來源

2017-03-13 21:42:15 cheesydoritosandkale

我沒有嘗試其他的修復用指令，但我使用這個簡單的CSS，並得到我所需要的。任何關於這個CSS的更正或建議將受到歡迎。

md-sidenav { 
    height: -webkit-fill-available; 
}

來源

2017-11-24 06:45:15

如何使用Angular-Material獲得完整高度的sidenav

回答

相關問題