Q:

How to make div 10% of device screen height css

What I am looking for is a CSS equivalent of jQuery's $("div").css({"height":screen.height/10})
I have heard of CSS media queries and I like them, but I don't know of anything that could even do something even close to that. I know how to use min-height query: 
@media (min-height: ... /* some height */){
    div{
        height: ... /* 'some height' divided by ten */
    }
}

but it only gets 10% height of the browser window (not what I'm looking for!).
And I can't just simply use height: 10% because the div is nested in another element that has a set height in pixels.
I also can't use height: 10vh because the viewport's height is not at all the device screen's height (tested in Chrome and IE; If you want proof, resize the window. You'll notice that the height changes as the window's height changes)
NOTE:
I am asking that the div be 10% of the device screen, meaning that if the computer's monitor (the device screen) has a resolution of 1280px by 800px, then the div should be 10% of 800px, which is 80px. Also, if the window resizes, the div's height should not change, because even though the window is resizing, it is impossible to resize the physical computer monitor or phone screen 

A:

It's not entirely clear what you are referring to but there IS a CSS property for this.
It's the vertical height unit (vh)
Each vh equates to 1% of the vertical height of the screen / viewport.
JSfiddle
CSS
div {
    background: red;
    height:10vh;
}

CanIUse reference
MDN reference 

A:

You can use min-device-height instead of min-height:
@media (min-device-height: ... /* some height of the screen*/){
    div{
        height: ... /* 'some height' divided by ten */
    }
}

This also applies to the other dimensional queries such as:
min-width -> min-device-width
height -> device-height
width -> device-width
for more visit Mozilla's guide for CSS queries.

