Why Does The overflow-y Property Not Work With Per

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

use this css for div which height must dimensioned in percents of parent element:

css .child { position: absolute; top: 10px; bottom: 0px; }

Answer 2

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.

Answer 3

It is considering 100% of the parent, which is the body. Hence it occupies the height of complete space available. Specify height a lesser amount in % rather than 100 (if you specifically prefer percent). It is upto you what you chose.