如何在没有垂直滚动条的情况下设置 100% 高度？

Question

上下文

我有一个固定高度的导航栏。我希望下面的空间垂直填充屏幕的其余部分。我还需要有一个固定的高度，因为我在页面中有一个容器，它有一个可滚动的列表，但不滚动整个页面overflow: hidden

问题

当我在100% 的所有父元素上设置高度时，我得到一个垂直滚动条。我在 SO 上找到了一些关于“保证金崩溃”的答案，但没有什么可以解决我的问题。 100vh 在没有滚动条的情况下也无法工作。

这是设置高度的 css（#__next 只是 next.js 呈现页面的 div）：

html,
body,
#__next {
  height: 100%;
  width: 100%;
}

导航栏只是一个固定的像素高度，下面的空间有height: 100%

这是显示垂直滚动条的屏幕截图：

我在 chrome 检查器上找不到任何问题。

它应该是这样的（设计文件）：

你知道如何解决这个问题吗？我需要从屏幕“SippetPanel”和“SnippetContent”中获取两个容器以获取剩余高度而不添加滚动条。它也应该有一个隐藏溢出的内部滚动条（稍后当列表中有很多项目时，比如来自设计文件）

Answer 1

请注意，百分比高度是指父母的身高。 您可以使用calc() 来解决您的问题：

#__next{
    height: calc(100% - navbarpx);
    ...
}

calc()

关于填充问题，您可以查看border-box。

Answer 2

我通常只是尝试不同的 vh 值，这意味着 90vh、95.5vh 等，所以一切都很完美。您可以尝试干预 body position: absolute 等，但这会将所有内容推入导航栏，因此您需要使用额外的 margin-top 来修复它。

所以我看到的最佳解决方案是尝试不同的高度 vh 值并找到最佳位置。您需要对不同的手机类型以及媒体查询执行相同的操作，但这并不难。

Answer 3

其中一种方法是使用 flex-box，它允许您明确地说（取所有可用高度。

.body {
  display: flex;
  flex-direction: column;
}

.navbar {
  flex: 30px 0 0;
  /* 30px height and do not grow or shint */
  background: red;
}

.content {
  flex-grow: 1;
  /* take all available space */
  background: blue;
}

.body, html, body {
  width: 100%;
  height: 100%;
}

<div class="body">
<div class="navbar"></div>
<div class="content"></div>
</div>