CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3186555
user3186555

Reputation:

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

Upvotes: 8

Views: 17494

Answers (3)

Paulie_D
Paulie_D

Reputation: 114991

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

Upvotes: 18

gilbert-v
gilbert-v

Reputation: 1305

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

Upvotes: 2

user3186555
user3186555

Reputation:

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.

Upvotes: 6

Related Questions