获取前一个元素的高度答案

【问题标题】：get the height of the previous element获取前一个元素的高度
【发布时间】：2016-07-23 03:17:20
【问题描述】：

我可以只使用 CSS 获得前一个元素的高度吗？我正在使用 calc() 函数来动态设置 div B 的高度。

#b{
  height:calc(100vh - heightOfPreviousElement);
}

我需要知道前一个元素的高度。

我知道的是，100vh 等于屏幕高度的 100%。

我在下面的答案中使用了代码。使用 flex，

我有一个问题。橙色的高度变小。

【问题讨论】：

对我来说这听起来像是一个 XY 问题。也许可以使用其他方法（例如 flexbox）进行布局，因为您只是根据另一个元素（兄弟元素）调整高度。不幸的是，CSS 不允许选择先前的元素或父元素（因此得名 cascading）。更新您的问题以包含更多详细信息，例如您希望在视觉上实现哪种布局以及代码的 sn-ps，这将非常有帮助。
可能重复：stackoverflow.com/q/33129660/3597276

标签： html css

【解决方案1】：

您可以使用 flexbox 轻松实现您想要的效果。诀窍是让蓝色容器（具有灵活高度的容器）在需要时增加大小，使用flex: 1 1 auto，这只是以下的简写：

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

请参阅下面的概念验证代码 sn-p：

body {
  padding: 0;
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.wrapper > div {
  width: 100%;
}
#c1 {
  background-color: #880015;
  color: #fff;
  height: 60px;
  margin-bottom: 10px;
}
#c2 {
  background-color: #ff7f27;
  }
#c3 {
  background-color: #00a2e8;
  flex: 1 1 auto;
  margin-bottom: 10px;
  }

<div class="wrapper">
  <div id="c1">height: 60px</div>
  <div id="c2">height: auto (determined by content?)</div>
  <div id="c3">flexible height</div>
</div>

【讨论】：

我使用了这段代码但是有问题。请参阅我更新的问题。
@JohnArellano 那是因为你没有足够的高度来容纳所有这些。发生这种情况时，flex 元素的维度会折叠。您可以通过设置flex-shrink: 0（默认为1）来防止这种情况。

【解决方案2】：

不，您不能在 CSS 中选择前一个元素。

您可能对使用 .css() 方法选择前一个元素并应用高度的 JQuery Prev 或 Parents 方法感兴趣？

【讨论】：