使div和最大div一样大

Question

我想创建一个包含3个容器的计划/定价页面。每个容器都包含一些信息，一个基本示例就是Github定价页面

当前我的容器看起来像

当我尝试赋予它们相同的高度时，它们看起来就像

如您所见，它们现在变得太大了。

我使用CodeSandbox创建了一个有效的提琴，因为我使用了VueJs

https://codesandbox.io/s/2x50024vl0

如何使它们像最大的容器一样大？

Answer 1

这应该有帮助

.planContainer {
  display: flex;
  flex-direction: column;
}
.planTitle {
  flex-grow: 0;
}
.planContent {
  flex-grow: 1;
}

https://codesandbox.io/s/5m256839px

说明

如果检查#plans元素，则它是一个网格。所有网格项目（.planContainer）始终具有相同的高度，因为它们位于同一网格轨道上。网格项目通常都是这种情况，您对此无能为力。
但是.planContainer的内容宽度不同，因为它们与网格项目的高度无关。如果您使用垂直（flex-direction: column;）柔韧性并允许.plancontent网格项增大（grow: 1;），那么您就完成了。

附录

然后您可以轻松地添加一个具有grow: 0的页脚，就像github示例一样。

Answer 2

我一直在处理您的代码，并注意到您正在使用网格CSS，所以我将为您提供基于网格CSS的答案。当我检查您的.planContainer元素时，它们都具有相同的高度。但是，.planContent元素未占用剩余空间。您可以使用以下方法解决此问题：

 .planContainer {
    display: grid;
    grid-template-rows: auto 1fr;
    width: 350px;
    }

自动确保您的.planTitle使用您已经设置的大小设置样式，而1fr使.planContent使用剩余的空间。

我注意到您的网站是反应性的，并且当宽度小于或等于1000时仅使用一列，以达到该大小的相同结果，请使用：

@media only screen and (max-width: 1000px) {
#plans {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-gap: 30px;
    padding: 50px 200px;
}

grid-auto-rows是一个属性，用于定义您未明确设置的行的大小。

我还注意到您使用百分比来设置网格的大小，有时尝试使用fr。将fr视为分数，因此grid-template-columns: 1fr 1fr;形成两列，每列各占50％。您还可以在fr中使用不同的值，例如：grid-template-columns: 2fr 1fr;使得一列占据2/3的空间，另一列占据剩余的1/3。

我之所以这样说是因为我本能地改变了

#plans {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
  padding: 100px 250px;
  background: #ffffff;
}

到

#plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
  align-items: center;
  justify-items: center;
  padding: 100px 250px;
  background: #ffffff;
}

当我检查您的代码时，但它们确实实现了相同的目的。

这也是指向已编辑代码https://codesandbox.io/s/r5vo8vormm

的链接