모서리 재질 응용 레이아웃

Question

전자 응용 프로그램에서 각도 재료로 일종의 '마스터 - 디테일'레이아웃을 만들려고합니다. 좀 이런

:

I가 전체 높이 (마이너스의 높이를 독립적으로 스크롤하고 있습니다해야 내가 항상 상단에 고정하려는 도구 모음 및 2 '열' 툴바 ...)

하지만 다른 장소에 md-content 태그를 넣으려고 시도하고 CSS 디스플레이 및 위치를 어지럽히는데 ... 나는 이것을 못질 할 수있었습니다! 이 작업을 수행하는 방법 :

'권리'(각 자료를 읽기) 무엇인가? 그것은 어딘가에 플렉스 박스 CSS와 관련이있어? 여기

Answer 1

당신은 갈 - CodePen

주요 것을 내용

마크 업

가기 div

overflow: auto에서

• layout-fill 및 layout="column" 지적이다하는

  <div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column"> 
      <md-toolbar class="md-hue-2"> 
      <div class="md-toolbar-tools"> 
       <md-button class="md-icon-button" aria-label="Settings" ng-disabled="true"> 
       <md-icon md-svg-icon="img/icons/menu.svg"></md-icon> 
       </md-button> 
       <h2> 
       <span>Toolbar with Disabled/Enabled Icon Buttons</span> 
       </h2> 
       <span flex></span> 
       <md-button class="md-icon-button" aria-label="Favorite"> 
       <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon> 
       </md-button> 
       <md-button class="md-icon-button" aria-label="More"> 
       <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon> 
       </md-button> 
      </div> 
      </md-toolbar> 
      <md-content layout="row" flex> 
      <md-list id="list" flex="20"> 
       <md-list-item 
          class="md-3-line" 
          ng-repeat="item in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" 
          ng-click="null"> 
       <div class="md-list-item-text" layout="column"> 
        <h3>Hello world</h3> 
        <h4>Blah blah</h4> 
        <p>123456789</p> 
       </div> 
       </md-list-item> 
      </md-list> 
      <md-tabs md-border-bottom flex="80"> 
       <md-tab label="one"> 
       <md-content class="tabContent" class="md-padding"> 
        <h1 class="md-display-2">Tab One</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p> 
       </md-content> 
       </md-tab> 
       <md-tab label="two"> 
       <md-content class="tabContent" class="md-padding"> 
        <h1 class="md-display-2">Tab Two</h1> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p> 
        <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p> 
        <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit. Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec orci posuere, nec luctus mauris semper.</p> 
        <p>Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis. Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel. Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed nisl consectetur, rhoncus sapien sit amet, tempus sapien.</p> 
        <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
       </md-content> 
       </md-tab> 
       <md-tab label="three"> 
       <md-content class="tabContent" class="md-padding"> 
        <h1 class="md-display-2">Tab Three</h1> 
        <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
       </md-content> 
       </md-tab> 
      </md-tabs> 
      </md-content> 
  </div> 
  

  CSS는

  #list { 
      border-right: 1px solid #DDD; 
      overflow: auto; 
  } 
  
  .tabContent { 
      overflow: auto; 
  }