Jinzu
Jinzu

Reputation: 1335

How to get a vertical scrollbar to appear

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;
}

Upvotes: 0

Views: 46

Answers (1)

Johannes
Johannes

Reputation: 67778

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%;
}

Upvotes: 1

Related Questions