Angular Material Card填充父级的高度

Question

我试图找出如何设置md卡的高度来填充其父级.这是我的例子:

<div ng-controller="AppCtrl" ng-app="MyApp">
  <div layout="column" layout-gt-sm="row" layout-padding="layout-padding" layout-fill="layout-fill">

    <div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill">
      <div flex="flex" layout="row">
        <md-content flex="flex">
          <md-card>
            <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
          </md-card>
        </md-content>
      </div>
    </div>

    <div flex="flex" flex-gt-sm="33" layout="column">
      <md-card flex="flex">
        <md-card-content>
          <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p>
        </md-card-content>
        <div layout="column" layout-gt-sm="row" class="md-actions">
          <md-button flex="flex" ng-click="asdf()">asdf
            <md-tooltip>asdf</md-tooltip>
          </md-button>
          <md-button flex="flex" ng-click="qqqqqqqq();">qqqqqqqq
            <md-tooltip>qqqqqqqq</md-tooltip>
          </md-button>
        </div>
      </md-card>
      <md-card flex="flex">
        <md-card-content>
          <div layout="column">
            <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p>
        </md-card-content>
      </md-card>
    </div>

  </div>
</div>

http://codepen.io/anon/pen/BNPBwJ

有人可以帮忙吗？

Answer 1

你好像有点过于复杂.当你简化它时,它的工作原理如下:

<md-content layout="row" flex>
  <md-card flex="33">
    <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
  </md-card>
    ...

代替

<div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill">
  <div flex="flex" layout="row">
    <md-content flex="flex">
      <md-card>
        <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
      </md-card>
    </md-content>
  </div>
</div>

在我自己的代码中,我还添加了一个类来md-content专门设置高度,并且卡片从那里填充空间.

Answer 2

我是 Angular Material 的新手，所以我没有答案。我可以告诉你的是，我应用了一些 style="background-color: red; padding: 5px;" 到元素，再到 md-content，这些元素都是布局填充的。

我还注意到 md-card 的高度是从 body 继承的，并且是 100%。

也就是说，如果你丢失了 md-content 指令，它确实有效。抱歉，我无法解释原因，我也可以帮助理解这种行为。