100vh 不会使列 100% 高度

Question

我有这个代码：

.container {
  display: flex;
  height: 100vh;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

问题：即使我将容器的高度设置为 100vh，如果我向下滚动，红色部分直到底部。为什么？以及当我向下滚动时如何使.menu 部分直到底部？

Answer 1

如果您想让它处于整个网站高度，请设置 height: auto; 而不是 height: 100vh。 100vh 不是网站高度的 100%，而是屏幕高度的 100%。

.container {
  display: flex;
  height: auto;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

Answer 2

你只是不需要容器的height: 100vh; ，删除它，就可以了，见sn-p。高度会自动填满整个容器，因为它是一个弹性容器。

.container {
  display: flex;

}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

Answer 3

100vh（视口高度）等于窗口的高度（以像素为单位）。这并不意味着它有 100% 的高度。因此，它的行为与指定的完全一致。

如果你想在左侧有一个固定位置的菜单，你可以例如将菜单固定在 100vh 的高度。

 position: fixed;
 height: 100vh;

你也可以使用 flexbox 来解决这个问题。参见例如Flexbox 100% height Issue

Answer 4

你可以看到滚动条，因为元素有它们自己的margins 和paddings 你没有重置，这就是为什么它更多的是100vh 的高度。

您可以通过为所有元素重置 padding and margin 来解决此问题。

您可以使用* 来执行此操作，它将针对您网页上的所有元素。

只需将其添加到您的 css 顶部，您的滚动条就会消失：

*{

  margin : 0px;
  padding : 0px;

}

至于为什么你的 .menu 没有到底部，这很简单，你右边的文字在一定的分辨率下变得太大了，正因为如此，它突破了 100vh 的高度，而你的 .menu div仍然保持在 100vh。

希望这会有所帮助，这是 100vh 修复的解决方案 :)

*{

  margin : 0px;
  padding : 0px;

}

.container {
  display: flex;
  height: 100vh;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>