无法为 Flexbox 子项设置完整高度，任何帮助将不胜感激 HTML CSS SASS 网页设计

Question

我正在尝试创建一个与 youtube 布局相似的电影应用程序，我使用 body 作为 Flex 父级，（导航和主）作为 Flex 子级，我已经在 Stackoverflow 中遇到了一些类似的问题，但是没有一个他们解决了我的问题

结果图像

这是我的代码：

```https://codepen.io/userahmad2001/pen/poaKXBz```

Answer 1

2024 年更新：

我在浏览我的个人资料时偶然发现了这一点，实际上我现在建议使用

dvh

而不是

vh

。特别是对于移动浏览器下巴和前额 UI，它们不计算

vh

，而是计算

dvh

，所以我现在会执行以下操作：

body {
  min-height: 100dvh; 
}

您可以检查浏览器对它的支持，我想说这对大多数人来说都有好处，但是< 90% might be worry-some for others. https://caniuse.com/mdn-api_css_dvh_static

之前的回答：

我相信我明白你在说什么，

（如果这是完全错误的，请告诉我，我会更新它！）

你需要为身体添加一个高度，也许最小高度会有所帮助

body {
  min-height: 100vh; 
}

这将高度设置为至少是视口的高度。