Why Does The overflow-y Property Not Work With Percent Height

Question

I'm trying to use percentage height with overflow-y:auto; and instead of creating a scroll bar on the side of the div, it's using the page scroll bar.

Here's an example of want I'm getting at: http://jsfiddle.net/hmwe2jty/

Is it possible to use this property with percent height?

Answer 1

TL;DR Use the viewport height/width instead of a percentage. Change 100% to 100vh, and you're done!

EDIT:

The percentages take the precentage of the parent element. For example:

console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);

#parent {
  background: yellow;
  width: 500px;
  height: 150px;
}

#child {
  background: orange;
  width: 50%;
  height: 100px;
}

<div id="parent">
  <div id="child">
    I am 250px wide!
  </div>
</div>

The new CSS3 viewport units use the user's viewport as a base. For example:

console.log("Parent's width: " + document.getElementById("parent").offsetWidth);
console.log("Child's width: " + document.getElementById("child").offsetWidth);

#parent {
  background: yellow;
  width: 500px;
  height: 150px;
}

#child {
  background: orange;
  width: 50vw;
  height: 100px;
}

<div id="parent">
  <div id="child">
    My width is 50% of the user's viewport, regardless of the size of my parent!
  </div>
</div>

Because the body element is a bit weird, it's default behaviour is to shrink to fit is contents. So:

body {
  background: yellow;
  border: 1px solid red;
}

The body element wraps around it contents, <br>
but the backgound just ignores this behaviour.

So, since the parent element is the body, you will need to use the new vw and vh units. Read a article on CSS Tricks

EDIT 2:

Another way to choose the viewport as parent would be to make the element's position either fixed or absolute. In that instance the parent would become the viewport, thus giving you the needed value.