html - 容器超过其高度 100vh

我对以下代码有问题。即使我指定了 height: 100vh ， body 元素的 height = 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>

最佳答案

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

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

告诉 main 只消耗可用空间。

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

现在 header 可以是任意高度，并且 main 不会溢出 body 。
min-height 规则增加了灵活性，允许 flex 元素覆盖最小尺寸默认值。完整解释见:Why doesn't flex item shrink past content size?

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

header {
  background-color: orange;
}

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

.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>

关于html - 容器超过其高度 100vh，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46130452/