CSS 100vh 按标题偏移

Question

我这里有这支笔：https://codepen.io/anon/pen/wPdrod

如您所见（至少在 Chrome 和 Firefox 中），有 2 个垂直滚动条。应该只有内部的，因为标题应该保持静态。

造成这种情况的 CSS 是：

#app
{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
}

尤其是 100vh 高度。这导致视口太高了 36px。这是标题高度。如果我这样做：

#app
{
    ...
    height: calc(100vh - 36px);
}

然后它工作得很好。我试图弄清楚为什么我首先需要这样做。这种布局导致 100vh 占标题高度的原因是什么？我觉得我不应该这样做，因为标题与其余元素一起位于布局 div 中。

Answer 1

#header 在#app 内，所以这是正常行为，特别是如果您的邻居 (#body) 有 height: 100%（高度是相对于父级设置的，所以它也是 100vh）。这就是显示第二个滚动条的原因。

实际上你可以做的是从#body 中删除高度。