CSS get height of screen resolution

Question

I'm having a hard time getting the height of lower screen resolution because my screen resolution is 1920x1080.

Does anyone know how to get height and width of the screen resolution?

I checked my work on a 1024x768 resolution and it is rendered all messed up.

Check out media queries http://www.w3.org/TR/css3-mediaqueries/ — Musa, Jul 17 '12 at 05:08
I was looking for the same thing the other day, and stumbled upon this interesting piece of literature: http://mislav.uniqpath.com/2010/04/targeted-css/ — Jules, Jul 17 '12 at 05:13

score 249 · Answer 1 · edited Apr 06 '16 at 13:38

249

You could use viewport-percentage lenghts.

See: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

It works like this:

.element{
    height: 100vh; /* For 100% screen height */
    width:  100vw; /* For 100% screen width */
}

More info also available through Mozilla Developer Network and W3C.

edited Apr 06 '16 at 13:38

horstwilhelm

305
1
15

answered Jan 09 '15 at 18:57

Hendrik Eichler

2,491
2
10
3

1

the only problem with this approach is that the vh in mobile is calculated including the address bar, which makes it hard to count on it for fixed full-hight elements. – Roshdy Jul 31 '17 at 08:15
9

Unfortunately "vh" is not the screen height, but the viewport height (hence the abbreviation). If the browser window is not maximised, you are not getting screen height, you get the window viewport height. – yodabar Oct 21 '19 at 13:22

score 49 · Answer 2 · answered Mar 01 '19 at 12:44

Adding to @Hendrik Eichler Answer, the n vh uses n% of the viewport's initial containing block.

.element{
    height: 50vh; /* Would mean 50% of Viewport height */
    width:  75vw; /* Would mean 75% of Viewport width*/
}

Also, the viewport height is for devices of any resolution, the view port height, width is one of the best ways (similar to css design using % values but basing it on the device's view port height and width)

vh
Equal to 1% of the height of the viewport's initial containing block.

vw
Equal to 1% of the width of the viewport's initial containing block.

vi
Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis.

vb
Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis.

vmin
Equal to the smaller of vw and vh.

vmax
Equal to the larger of vw and vh.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

VH worked for me. Setting it to 75 fits all sizes with a little bigger on smaller ones, which is fine for my needs. Thank you to all who posted the VH and VW. — Wayne Barron, Jun 01 '23 at 19:38

score 22 · Answer 3 · edited Dec 07 '16 at 06:09

You actually don't need the screen resolution, what you want is the browser's dimensions because in many cases the the browser is windowed, and even in maximized size the browser won't take 100% of the screen.

what you want is View-port-height and View-port-width:

<div style="height: 50vh;width: 25vw"></div>

this will render a div with 50% of the inner browser's height and 25% of its width.

(to be honest this answer was part of what @Hendrik_Eichler wanted to say, but he only gave a link and didn't address the issue directly)

Starx · Accepted Answer · 2012-07-17T05:23:30.300

18

It is not possible to get the height of the screen from CSS. However, using since CSS3 you can use media queries to control the display of the template as per the resolution.

If you want to code on the basis of height using media queries, you can define style-sheet and call it like this.

<link rel="stylesheet" media="screen and (device-height: 600px)" />

edited Jul 17 '12 at 05:23

answered Jul 17 '12 at 05:14

Starx

77,474
47
185
261

score 16 · Answer 5 · answered Dec 27 '16 at 17:58

You can bind the current height and width of the screen to css variables: var(--screen-x) and var(--screen-y) with this javascript:

var root = document.documentElement;

document.addEventListener('resize', () => {
  root.style.setProperty('--screen-x', window.screenX)
  root.style.setProperty('--screen-y', window.screenY)
})

This was directly adapted from lea verou's example in her talk on css variables here: https://leaverou.github.io/css-variables/#slide31

isacvale · Answer 6 · 2018-03-01T13:03:00.170

You can get the window height quite easily in pure CSS, using the units "vh", each corresponding to 1% of the window height. On the example below, let's begin to centralize block.foo by adding a margin-top half the size of the screen.

.foo{
    margin-top: 50vh;
}

But that only works for 'window' size. With a dab of javascript, you could make it more versatile.

$(':root').css("--windowHeight", $( window ).height() );

That code will create a CSS variable named "--windowHeight" that carries the height of the window. To use it, just add the rule:

.foo{
    margin-top: calc( var(--windowHeight) / 2 );
}

And why is it more versatile than simply using "vh" units? Because you can get the height of any element. Now if you want to centralize a block.foo in any container.bar, you could:

$(':root').css("--containerHeight", $( .bar ).height() );
$(':root').css("--blockHeight", $( .foo ).height() );

.foo{
    margin-top: calc( var(--containerHeight) / 2 - var(--blockHeight) / 2);
}

And finally, for it to respond to changes on the window size, you could use (in this example, the container is 50% the window height):

$( window ).resize(function() {
    $(':root').css("--containerHeight", $( .bar ).height()*0.5 );
});

my use case is different but the idea is greatl – dotnetCarpenter Jun 28 '18 at 11:32 — dotnetCarpenter, Jun 28 '18 at 11:32

score 1 · Answer 7 · edited May 23 '17 at 12:34

1

In order to get screen resolution you can also use jquery. This link help you very much to resolve.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 17 '12 at 05:13

Yuseferi

7,931
11
67
103

score 1 · Answer 8 · answered Aug 29 '22 at 20:24

I had this issue, but using some JavaScript worked:

var s = document.createElement("style");
document.body.append(s);
window.onresize = function() {
    s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
}
s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";

Full example:

var s = document.createElement("style");
document.body.append(s);
window.onresize = function() {
  s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";
}
s.innerHTML = ":root{--win-width:" + window.innerWidth + "px;--win-height:" + window.innerHeight + "px}";

.window-size {
  width: var(--win-width);
  height: var(--win-height);
  background: #00f;
}

<div class="window-size">This will always be this size of the window.</div>
<p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p><p style="font-size: 100px; white-space: nowrap">this is here for an overflow....................................................................................................................................................................</p>

score 0 · Answer 9 · edited Oct 24 '21 at 11:11

0

To get the screen resolution you need to use Javascript instead of CSS: Use screen.height for height and screen.width for width.

edited Oct 24 '21 at 11:11

S.Khajeh

327
1
9

answered Jan 09 '15 at 19:16

Guilherme de Jesus Santos

4,955
5
43
68

score -14 · Answer 10 · edited Jul 17 '12 at 09:22

-14

Use height and width in percentage.

For example:

width: 80%;
height: 80%;

edited Jul 17 '12 at 09:22

jackJoe

11,078
8
49
64

answered Jul 17 '12 at 06:04

Ashish Kumar

15
1
9

Percentage is only for parrent element max height/width. – BladeMight Dec 29 '16 at 00:24
only works for the parent element – Code with Benji Apr 09 '22 at 17:09

CSS get height of screen resolution

10 Answers10

Linked

Related