身高:100vh; 并在较小的屏幕上溢出"内容"

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>