是否可以让 flex div 获取其外部容器的高度？ [复制]

Question

例如，在下面的小提琴中，我有一个 flex div。

似乎将高度设置为 100% 对 div 没有影响。

默认情况下，div 是显示块，占宽度的 100%。但显然高度的行为不同。

https://jsfiddle.net/02wtuzjp/1/

#expand{
  display: flex;
  height: 100%;
  border: 1px solid red;
}

<div id = 'expand'>
</div>

这似乎是预期行为，因为 div 中没有内容。

https://css-tricks.com/almanac/properties/h/height/

一种解决方案是使用单位vh 或更具体地100vh。

但是，我不确定这是正确还是最好的方法。

Answer 1

具有基于百分比高度的元素需要一个parent reference 来作为其高度的基础。您可以添加：

html, body {
    height: 100%;
}

你的元素将是 100% 的高度：

html,
body {
  height: 100%;
}

#expand {
  display: flex;
  height: 100%;
  border: 1px solid red;
}

<div id="expand">
</div>

根据您的编辑： 您当然可以使用100vh 来设置高度，但是该元素将始终是视口高度的 100%。无论它是否包含元素。

例如：

#random {
  height: 50px;
}

#expand {
  display: flex;
  height: 100vh;
  border: 1px solid red;
}

<div id="random">
</div>
<div id="expand">
</div>

您可以看到expand 元素的高度为 100vh，并创建了一个滚动条，因为高度是视口的高度，而不是剩余空间。

资源： Article on Medium