css - 高度 : 100vh; and overflow "content" on smaller screens

Question

我有一个 height: 100vh; 但我有很多内容，在较小的屏幕上会溢出到另一个“vh”，在较小的屏幕上如何处理溢出？

Answer 1

如果我没理解错的话，你有多个 height: 100vh 的元素，问题是它们的内容可能会溢出。

在这种情况下，你可以

• 使用overflow 属性正确处理溢出。

  例如 overflow: auto 将仅在必要时添加滚动条。

  html,body {
    margin: 0;
  }
  section {
    height: 100vh;
    overflow: auto;
    background: yellow;
  }
  section + section {
    background: lime;
  }
  div {
    height: 150vh;
    margin-left: 15px;
    border-left: 1px dotted;
  }

  <section>
    Start<div></div>End
  </section>
  <section>
    Start<br />End
  </section>

• 使用 min-height: 100vh 而不是 height: 100vh

  这样，如果内容更高，元素会增长以避免溢出。

  html,body {
    margin: 0;
  }
  section {
    min-height: 100vh;
    background: yellow;
  }
  section + section {
    background: lime;
  }
  div {
    height: 150vh;
    margin-left: 15px;
    border-left: 1px dotted;
  }

  <section>
    Start<div></div>End
  </section>
  <section>
    Start.<br />End
  </section>