容器超出了其高度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>

- Marco Eckstein

Answer 1

将 body 元素设置为纵向的弹性容器。

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

告诉main只消耗可用空间。

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

现在 header 的高度可以是任意的，main 不会超出 body。

min-height 规则增加了灵活性，允许 flex 项目覆盖最小尺寸默认值。详细解释请参见： 为什么 flex 项目无法缩小超过其内容大小？

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>

- Michael Benjamin