Các phần tử nội dung có thể cuộn với các tab có chiều cao động Vật liệu góc

Question

Câu hỏi này đã xuất hiện severa l t imes trong quá trình tiến hóa Angular Material, nhưng tôi không thể thực hiện bất kỳ đề xuất nào trong v1.0.5. Toàn bộ trang (hoặc thùng chứa) cuộn, di chuyển các tab ra khỏi tầm nhìn.

Làm cách nào để có thể đạt được các thành phần nội dung có thể cuộn, có chiều cao đầy đủ?

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

Demo fiddle

Bonus Karma cho kết hợp custom scrollbars.

Answer 1

Tôi đã làm việc đó. Bằng cách loại bỏ các chỉ thị dynamic-height, sau đó sử dụng định vị tuyệt đối, nó làm việc:

.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

Định vị tuyệt đối là cần thiết để get the child of a flex element to expand.

Lưu ý: Chiều cao không chính xác trong bản trình diễn fiddle. Vấn đề này không xảy ra trong dự án của tôi.

Answer 2

Bọc nội dung tab bên trong div và chỉ định chiều cao tối đa.

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

và phần css

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

Js-fiddle link

Answer 3

Hãy thử điều này:

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