2016-10-08 50 views
0
<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-content佔據了整個頁面;然而,使用ui-view gived列布局和flex類時,我預計它會佔用頁面的整個高度,但佔用僅由內容消耗的高度。md-content不消耗父元素的全部高度

你能幫忙解決一下代碼中的錯誤嗎,這樣ui-view可以佔據整個頁面嗎?

回答

1

在這裏你去 - CodePen

你需要利用layout-fill。從docs

enter image description here

爲了這個工作的上層元素必須佔據整個屏幕。在上面的例子中,它是<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; 
} 
+0

嘿@camden_kid感謝您的回答。但是,我試圖實現的是左側列表和右側詳細面板的單獨滾動/填充。就像在你的codepen中一樣,兩者都是相同的高度。有沒有辦法讓列表達到全高而不管列表中的元素(垂直分隔符是全高),並且兩個部分都有單獨的卷軸。 – user1242321

+0

@ user1242321查看已更新的CodePen。你是這個意思嗎? –

+0

我看不到列表部分中的滾動....我的問題是假設列表中有100個項目...所以只有列表部分應該滾動...而細節部分保持靜止! – user1242321