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,325
  • 2
  • 10
  • 22

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
  • 64,305
  • 18
  • 73
  • 130