md-contentは親要素の完全な高さを消費しません。

<md-content flex class="md-padding page-content"> 
    <div ui-view flex layout="column"> 
     <div class="center" layout="row" flex> 
     <md-content layout="column" flex="30"> 
      <md-list-item ng-repeat="entity in vm.entities"> 
      <md-checkbox ng-model="entity.selected"></md-checkbox> 
      <p>{{entity.info}}</p> 
      <md-icon class="md-secondary" 
        ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon> 
      </md-list-item> 
     </md-content> 
     <md-divider></md-divider> 
     <md-content layout="column" flex="70"> 
      Details here! 
     </md-content> 
     </div> 
    </div> 
</md-content>

上記のコードでは、最も外側のmdコンテンツが完全なページを占めています。しかし、ui-view givedの列レイアウトとflexクラスでは、ページの完全な高さを占めることが予想されましたが、コンテンツだけで消費される高さを占めていました。md-contentは親要素の完全な高さを消費しません。

あなたはコード内のエラーを助けてくれますか？そのため、ui-viewは完全なページを占有できますか？ここで

出典

2016-10-08 user1242321

あなたが行く - CodePen

あなたはlayout-fillを利用する必要があります。これは、上側要素を動作させるためにはdocs

からフルスクリーンを占有しなければなりません。上記の例では、<body>です。

マークアップ

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill> 
    <md-content layout-fill flex class="md-padding page-content"> 
    <div ui-view flex layout="column" layout-fill> 
     <div class="center" layout="row" flex> 
     <md-content id="list" layout="column" flex="30"> 
      <md-list-item ng-repeat="entity in vm.entities" flex="none"> 
      <md-checkbox ng-model="entity.selected"></md-checkbox> 
      <p>{{entity.info}}</p> 
      <md-icon class="md-secondary" 
        ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon> 
      </md-list-item> 
     </md-content> 
     <md-divider></md-divider> 
     <md-content id="details" layout="column" flex="70"> 
      Details here! 
     </md-content> 
     </div> 
    </div> 
    </md-content> 
</div>

CSS

.page-content { 
    background: yellow 
} 

#list { 
    overflow-y: auto; 
    overflow-x: hidden; 
}

出典

2016-10-09 15:45:31

ちょっと答えに感謝を@camden_kid。しかし、私が達成しようとしていたのは、左側のリストの個別のスクロール/塗りと、右側の詳細パネルです。あなたのコードブックのように、どちらも同じ高さです。リスト内の要素にかかわらずリストを完全な高さにする方法はありますか（垂直ディバイダはフルハイトになります）、両方のセクションにはそれぞれ独立したスクロールがあります。 – user1242321

@ user1242321更新されたCodePenを参照してください。それはあなたが意味することですか？ –

リストの中のスクロールが見えませんでした。私のクエストはリストに100個のアイテムがあると仮定していました...リスト部分だけをスクロールしてください。 – user1242321

md-contentは親要素の完全な高さを消費しません。

答えて

関連する問題