Height: 100vh; and overflow of "content" on small screens

Question

I have height: 100vh;, but I have a lot of content that overflows to another "vh" on smaller screens, how do I deal with overflow on smaller screens?

Answer 1

If I understand correctly, you have several elements with height: 100vh, and the problem is that their contents can overflow them.

In this case you can

• Use the property overflowto properly handle overflows.

  For example, it overflow: autowill add scrollbars only if necessary.

  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>

  Run codeHide result

• Use min-height: 100vhinsteadheight: 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>

  Hide result

Answer 2

overflow: auto; .