材料设计轻量级垂直拉伸MDL卡片。

Question

如何垂直拉伸mdl卡片，使所有内容都均匀分布？我希望mdl-card__suporting-text被拉伸。

这是一个示例http://codepen.io/anon/pen/grGbdb

- 123 456 789 0

---

在你的 CSS 中为 mdl-card__supporting-text 分配一个高度。或者将卡片嵌套在具有固定高度的行元素中。 - andnowchris

但是如果其中一张卡片的内容比其他卡片长怎么办？那么其他卡片的高度将不相同，因此它将回到原点。 - 123 456 789 0

如果您在CSS中为mdl-card__suporting-text设置高度，则所有具有该类名的元素都将具有该高度。因此，如果您在mdl-card__suporting-text中设置height:200px;，则包含mdl-card__suporting-text类名的所有三个卡片将具有相同的高度。 - andnowchris

对的，我的意思是，将来如果卡片的内容发生变化，无法适应200px，那也意味着必须再次更新样式为200px。希望以动态方式实现，而不是静态方式。 - 123 456 789 0

我现在明白了。你有没有考虑过，如果内容超过高度，是否允许滚动条出现？ 如果是这样，您可以将高度保持在200像素，并在mdl-card__supporting-text元素中设置overflow:auto; 当/如果内容超过高度时，滚动条将出现并允许用户在该元素内滚动。 - andnowchris

Answer 1

需要解决三个问题。

首先，mdl-cell元素已经具有行中“最大”单元格的高度。因此，为了使卡片高度相同，“将卡片制作成单元格”。

<div class="mdl-cell mdl-card mdl-shadow--2dp demo-card-wide">
//...
</div>

下一个问题是mdl-card__actions不在卡片底部。
为了解决这个问题，需要将操作位置设置为绝对位置，并将其移动到底部。

.demo-card-wide > .mdl-card__actions {
  position: absolute;
  bottom: 0px;
}

第三个问题：
现在最大的汽车的内容和动作重叠了，这是一个讨厌的问题。只有一个简单的解决方案（据我所知），如果您知道操作的高度。然后向卡片添加padding-bottom。

.demo-card-wide.mdl-card {
  /* ... */
  padding-bottom: 50px;
}

还有一个建议：尽量避免卡片的固定宽度。最好使用来自mdl网格的 mdl-cell--X-col/yyy/。

看看这个更改后的codepen

- hr_117

---

是的，似乎只能在Firefox中工作。我明天会再看一下它。有一个可行的解决方案，但我记不起来了。 - hr_117

谢谢。您说的避免卡片固定宽度是什么意思？能否请您详细说明一下？ - 123 456 789 0

Answer 2

您可以在需要添加间隔的位置添加一个空的<div class="column-expander"></div>，然后将以下内容添加到您的CSS中：

.column-expander {
     flex-grow: 1;
}

- naught101

Answer 3

避免使用演示的 mdl 组件

你只需要把卡片组件放到 grid 格子里面，就像这样：

<div class="mdl-card-wide mdl-cell mdl-cell--N-col>

mdl网格系统具有默认间距，因此如果您将卡片组件放置在单元格内，则卡片将自动采用默认网格间距。

这是codepen示例：

在卡片之间添加空格

<div class="mdl-grid">
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
          </div>

还要记住，卡片组件可以是正方形或宽的，但如果将卡片放在单元格中，则无需编写正方形或宽的代码。

同时避免使用mdl演示组件。

- Jean Carlos Ayala Ortiz

---

这完全没有回答问题。它关于垂直高度。 - naught101