容器超过其高度100vh

Question

我遇到以下代码问题。即使我指定了height: 100vh，body元素的高度= 100vh + header元素的高度。我该如何解决这个问题？

＆＃13;

＆＃13;

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. */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

告诉main仅消耗可用空间。

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

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

min-height规则增加了灵活性，允许弹性项覆盖最小大小的默认值。请参阅完整说明，请参阅：Why doesn't flex item shrink past content size?

＆＃13;

＆＃13;

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. */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;