Question

<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-contents占用了整个页面;但是使用ui-view gived列布局和flex类，我希望它占据页面的完整高度，但它只占用内容所消耗的高度。

您可以帮助解决代码中的错误，因此ui-view可以占用整个页面吗？

Answer 1

你去了 - 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;
}

md-content不会占用父元素的完整高度

1 个答案: