Scrollbare Inhaltselemente mit eckigen Material Registerkarten mit dynamischer Höhe

Question

Diese Frage ist aufgetreten severa l t imes während der Entwicklung von Angular Material, aber ich bin nicht in der Lage, einen der Vorschläge für v1.0.5 zu arbeiten. Die gesamte Seite (oder der Flex-Container) scrollt und verschiebt die Registerkarten aus der Ansicht.

Wie kann ich scrollbare Inhaltselemente in voller Höhe erreichen?

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

Demo fiddle

Bonus für Karma custom scrollbars enthält.

Answer 1

Ich habe es ausgearbeitet. Durch das Entfernen der dynamic-height Richtlinie, dann absolute Positionierung verwenden, es funktioniert:

.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

Absolute Positionierung ist erforderlich, um get the child of a flex element to expand.

Hinweis: Die Höhe ist falsch in der Geige Demo. Dieses Problem tritt in meinem Projekt nicht auf.

Answer 2

Wickeln Sie den Tab-Inhalt in ein div und weisen Sie ihm eine maximale Höhe zu.

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

und CSS Teil

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

Js-fiddle link

Answer 3

Versuchen Sie folgendes:

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