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>

this

有人可以帮忙吗？

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的身高是从身体继承的，而且是100％。

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

Angular Material Card填充父级的高度

2 个答案: