css - Angular Material 形式的填充高度

Question

我在 Angular Material(Cordova 应用程序)中有一个表单，它具有三个输入:标题、日志类型和描述。然后有两个按钮可以保存和取消。这是代码的相关部分:

<md-content layout="column">

<div layout="row" layout-padding>
    <md-input-container layout-fill>
        <label>Title</label>
        <input type="text" ng-model="vm.newLog.Title" class="md-display-1" />
    </md-input-container>
</div>

<div layout="row" layout-padding>
    <md-input-container layout-fill>
        <label>LogType</label>
        <md-select ng-model="vm.newLog.LogType">
            <md-option ng-repeat="logType in vm.logTypes" value="logType.value">
                {{logType.display}}
            </md-option>
        </md-select>
    </md-input-container>
</div>

<div layout="row" layout-padding flex="noshrink" height="auto">
    <md-input-container layout-fill>
        <label>Description</label>
        <textarea ng-model="vm.newLog.Description" />
    </md-input-container>
</div>

<div layout="row" layout-padding layout-align="end center">
    <md-button ng-click="vm.cancelNew()" class="md-raised md-primary">CANCEL</md-button>
    <md-button ng-click="vm.saveNew()" class="md-raised md-primary">SAVE</md-button>
</div>

我希望“描述”字段是多行的，并填满可用的屏幕空间(高度)。它不会那样做。此外，布局字段的呈现方式与我预期的不同。在其外观的屏幕显示下方，寻找进行此类布局的正确方法。

Answer 1

这就是我的做法 - CodePen

标记

<div id="all" ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-content layout="column" layout-fill layout-padding>
    <!-- Title -->
    <md-input-container flex="none">
      <label>Title</label>
      <input type="text" ng-model="vm.newLog.Title" class="md-display-1" />
    </md-input-container>

    <!-- Log Type -->
    <md-input-container flex="none">
      <label>LogType</label>
      <md-select ng-model="vm.newLog.LogType">
        <md-option ng-repeat="logType in logTypes" value="logType">
          {{logType}}
        </md-option>
      </md-select>
    </md-input-container>

    <!-- Description -->
    <div id="description" layout="column" flex>
      <md-input-container flex>
        <label>Description</label>
        <textarea ng-model="newLog.Description"></textarea>
      </md-input-container>
    </div>

    <!-- Buttons -->
    <div layout="row" layout-align="end center" flex="none">
      <md-button ng-click="vm.cancelNew()" class="md-raised md-primary">CANCEL</md-button>
      <md-button ng-click="vm.saveNew()" class="md-raised md-primary">SAVE</md-button>
    </div>
  </md-content>
</div>

CSS

#all {
  height: 100%;
}

#description {
  overflow-y: auto;
}

需要注意的是:

• md-content 的父级应该有完整的高度，以便 layout-fill 填满整个高度
• input 和按钮 div 应该有 flex="none" 这样它们就不会放大
• textarea 有一个带有 flex(相当于 flex="100)的父级 div，因此它放大，layout="column 和 overflow-y: auto(这样溢出的文本可以滚动)
• textarea 具有 flex 以便填充其父级