height: 100vh; and overflow “content” on smaller screens

Question

I have a height: 100vh; but I have a lot of content, which overflows into another \"vh\" on smaller screens, how do I deal w/ the overflow, on smaller screens?<

Answer 1

If I understand correctly, you have multiple elements with height: 100vh, and the problem is that their content may overflow them.

In that case, you can

• Use the overflow property to handle overflow correctly.

  For example overflow: auto will add scrollbars only when 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;
  }

  
    Start
  End
  
  
    Start
  End
  

• Use min-height: 100vh instead of height: 100vh

  This way, if the content is taller, the element will grow to avoid overflow.

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

  
    Start
  End
  
  
    Start.
  End