html - 如何设置CSS高度: 100% correctly for 1 sibling and fluid height for the other sibling?

Question

我有一个占据页面高度 50% 的容器。那行得通。 现在我需要在该容器内放置 2 个 child :一个我不知道高度(根据内容流动)，另一个应该占据容器的剩余高度空间。

我知道这个 CSS 有一个奇怪的地方，当你有 2 个 sibling 并且你将其中一个设置为 100% 时，它不会考虑另一个 sibling 的高度，而是只使用 100% 的父 block 水平元素。没关系:如果我为第一个 child 设置固定高度，我就能找到解决方案。

我现在的问题是我的第一个 child 需要达到正常高度。我如何使用 CSS 做到这一点？ (我知道如何使用 JS 获取 .outerHeight 来修复它)。

Pastebin - #1 子示例的固定高度

Answer 1

在你的Pastebin我看到您使用了 calc()。当您知道 sibling 的高度时，它会很好用。但是当其他 sibling 的高度未知或动态时，我会使用 CSS Flexbox相反:

.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top {
  flex-shrink: 0;
}

.bottom {
  height: 100%; // 100% height of its container minus height of siblings
}

bottom 类的元素将使用 100% 高度减去其兄弟元素的高度。 flex-shrink: 0 规则很重要，主要用于 iOS 设备，以避免在其他兄弟设备上收缩。它应该满足您对流体高度的需求。

Working example on Codepen here .