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中删除高度。