帶有角度材料動態高度標籤的可滾動內容元素

Question

在Angular Material的演變過程中，出現了此問題severa l t imes，但我無法提出任何適用於v1.0.5的建議。整個頁面（或彈性容器）滾動，將標籤移出視圖。

我該如何實現可滾動的全高內容元素？

<div flex> 
    <md-tabs md-dynamic-height md-border-bottom> 
     <md-tab label="one"> 
      <md-content class="md-padding"> 

Demo fiddle

獎金噶結合custom scrollbars。

Answer 1

我已經完成了。通過消除dynamic-height指令，然後使用絕對定位，它的工作：

.tabs-wrapper { 
    position: relative; 
} 
.full-size { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

<div ng-app="sandbox"> 
    <div flex class="tabs-wrapper"> 
     <md-tabs class="full-size" md-border-bottom> 

Fiddle demo

絕對定位需要get the child of a flex element to expand。

注意：小提琴演示中的高度不正確。我的項目中不會發生此問題。

Answer 2

將製表符內容封裝在div內併爲其指定最大高度。

<md-tab label="two"> 
     <md-content class="md-padding"> 
      <div class="tab-content"> 
       <h1 class="md-display-2">Tab Two</h1> 
      <div> 
     <md-content> 
<md-tab> 

和CSS部分

div.tab-content{ 
    max-height:350px; 
} 

Js-fiddle link

Answer 3

試試這個：

md-tabs-wrapper { 
    position : fixed; 
    width: 100%; 
    z-index: 1; 
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12); 
} 

md-tabs-content-wrapper { 
    margin-top: 48px; 
}