How to make div 10% of device screen height css

Question

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

What do you mean by 10% full screen but not the window? – Carlos Calla Sep 11 '14 at 16:19 — Carlos Calla, Sep 11 '14 at 16:19
I meant 10% of the device screen not the browser window. – Sep 15 '14 at 16:22 — , Sep 15 '14 at 16:22

score 17 · Answer 1 · answered Sep 11 '14 at 16:26

17

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

answered Sep 11 '14 at 16:26

Paulie_D

107,962
13
142
161

3

But that doesn't solve my problem. I want height of device, not viewport. – Sep 15 '14 at 16:27
3

I doesn't appear that way in chrome. `vh` is equivalent to javascript `window.height`; I want `screen.height` – Sep 15 '14 at 19:39

score 6 · Accepted Answer · answered Sep 11 '14 at 16:10

6

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.

answered Sep 11 '14 at 16:10

4

@Carlos Calla: No, maybe he did it so others could benefit from the answer. If you look at the Ask Question page, you'll see that there's a feature that allows you to post your own answer together with the question. Even I do it too: http://stackoverflow.com/questions/24196773/why-is-this-non-float-margin-collapsing-with-a-float http://stackoverflow.com/questions/16560018/how-do-i-make-text-shadow-and-box-shadow-use-the-text-color-on-all-browsers http://stackoverflow.com/questions/10711730/why-is-my-jquery-not-selector-not-working-in-css – BoltClock Sep 11 '14 at 18:26

score 2 · Answer 3 · answered Sep 11 '14 at 16:17

2

Use window.innerHeight:

document.getElementById([DIV ID]).style.height = (window.innerHeight / 10); // Gets window height.
window.onresize = function() { document.getElementById([DIV ID]).style.height = (window.innerHeight / 10);

See here: https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight

answered Sep 11 '14 at 16:17

gilbert-v

1,263
1
11
23

Ignore the comment that was left earlier. You are free to answer any question you wish provided it is on-topic, even if the asker has provided an answer of their own. In fact, if you know that the asker's answer is wrong and you know the correct answer, I would strongly encourage you to post it. – BoltClock Sep 11 '14 at 18:37
1

You saved my life. `vh` has issues with mobile browsers. This would be perfectly what I wanted. – Sep 01 '17 at 07:23

How to make div 10% of device screen height css

3 Answers3