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

Question

语境

我有一个固定高度的导航栏。 我希望下面的空间垂直填充屏幕的 rest。 我还需要有一个固定的高度，因为我在页面内有一个容器，该容器有一个可滚动但不滚动整个页面的列表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);
    ...
}

计算（）

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

Answer 2

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

所以我看到的最佳解决方案是尝试不同的高度 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>