css - 反应：让 div 占据所有可用的高度

Question

我正在努力让我的 div 占据所有可用的高度。

这是我的沙箱：https ://codesandbox.io/s/htstranslator-n3p04 问题是当搜索没有找到卡片时。

我尝试了 flex、flex-grow 等，但没有任何效果。

标签： cssreactjsheight

Answer 1

设置为：min-heigh: 100vh;它应该接受它

编辑：

所以这比基于你的 html 结构的看起来要复杂一些，我建议 css 如下：

body, #root, .content{
  min-height: 100vh;
}

然后你在哪里<div class="h-100"让它像：

<div class="h-100 d-flex flex-column" style="min-height: 100vh;">

有了所有这些设置，它应该像：