15

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?

Eric ERK
  • 349
  • 1
  • 3
  • 11
  • What is exactly the problem and what is the desired behavior? A [minimal example](http://stackoverflow.com/help/mcve) would help. – Oriol Jan 13 '16 at 07:30
  • On a small screen the 'height: 100vh;' flows into the next 'height: 100vh;' so it becomes jumbled and un-readable. – Eric ERK Jan 13 '16 at 07:32
  • FYI beware of iOS and viewport units http://caniuse.com/#search=viewport – FelipeAls Jan 13 '16 at 08:51

2 Answers2

43

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;
}
    <section>
  Start<div></div>End
</section>
<section>
  Start<br />End
</section>

  • 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;
}
    <section>
  Start<div></div>End
</section>
<section>
  Start.<br />End
</section>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 2
    @Oriol Amazing! Use `min-height: 100vh` works great! Thank you! – Joshua Feb 24 '17 at 03:33
  • `min-height: 100vh` works well until you need a child item to take 100% of that container's height. Then you encounter http://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height – Matt Stone Mar 10 '17 at 01:00
  • You are my hero. – Otto Dec 06 '18 at 15:30
4

Please try overflow: auto; in the style of the container.

Sample code

Yaser Ali Peedikakkal
  • 406
  • 2
  • 9