0

I am trying to get a vertical scrollbar on my div. The id is "both". I can only get the scroll to show if I have pixelated height and width. It is not working for percents. Below is html.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html>
  <body>
   <div id="both">
<h1>Sir Isaac Newton</h1>
    <img id="newton" src="https://lh5.googleusercontent.com/4MW-UzVwXP-y7aJulVuUuyY-fxDZ0k5dBdzKBC-ScBfEXmbk7TwV_iTnESdThc6oKCjVuBviQIrot7A=w1570-h822"></img>
   </div>
  </body>
</html>

Below is css

#newton {
  width: 20%;
  height: 20%;
}
#both {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}
Jinzu
  • 1,271
  • 1
  • 8
  • 18

1 Answers1

1

You need to add this rule to your CSS to have a height reference for the percentage heights of your elements:

html, body {
  height: 100%;
}
Johannes
  • 59,058
  • 16
  • 59
  • 114