容器超过其高度 100vh

Question

我对以下代码有问题。即使我指定了height: 100vh，body元素的高度 = 100vh +header元素的高度。我怎样才能解决这个问题？

body {
  height: 100vh; /* It should never be necessary to scroll the whole page. */
  margin: 0; /* Nothing should get added to the 100vh. */
}

header {
  background-color: orange;
}

main {
  display: flex;
  height: 100%; /* Occupy all space that is not occupied by the header. */
}

.column-1 {
  background-color: yellow;
  width: 25%;
  overflow-y: scroll; /* The only place where there should be a scrollbar. */
}

.column-2 {
  background-color: red; /* Is not actually visible. */
  width: 75%;
}

.column-2 div {
  background-color: green;
  width: 100%; /* Occupy all space that is available for column-2. */
  height: 100%; /* Same. */
}

<header>
    Header - Its height depends on the available width.
    There is a lot of stuff in here like foo foo foo foo foo foo foo foo...
  </header>
  <main>
    <div class="column-1">   
      <ul>
        <!-- This list may or may not cause scrolling. -->
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
      </ul>
     </div>
     <div class="column-2">
       <div>
         Content
       </div>
     </div>
  </main>

Answer 1

使body元素成为列方向的弹性容器。

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

告诉main只消耗可用空间。

main {
  flex: 1;
  min-height: 0;
}

现在header可以是任何高度，并且main不会溢出body。

该min-height规则增加了灵活性，允许弹性项目覆盖最小尺寸默认值。请参阅完整说明，请参阅：为什么 flex item 不缩小超过内容大小？

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

main {
  flex: 1;
  min-height: 0;
}