css: How to get screen height in css?

Question

.visitcard-ipcashier {
    position: fixed;
    background: white;
    top: 0;
    right: 0;
    height: 95%;
    overflow: auto;
    z-index: 50;
}

In the above code, i use height atrribute in 93%. But this varies depends on screen. How can i get screen height in css?

possible duplicate of https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution — Manpreet Matharu, Jul 24 '18 at 05:37
what is the difference between 100 % and 100vh? It seems to be working same — Raghul, Jul 24 '18 at 07:05
@SrividhyaS you are using fixed position so 100% is the same as 100vh because your element is positioned relatively to viewport and vh = viewport height — Temani Afif, Jul 24 '18 at 08:56
@TemaniAfif If i use position relative, Can I see difference between 100% and 100vh — Raghul, Jul 24 '18 at 10:04
Possible duplicate of [css get height of screen resolution](https://stackoverflow.com/questions/11516291/css-get-height-of-screen-resolution) — Code_Ninja, Jul 26 '18 at 08:47

score 31 · Accepted Answer · answered Jul 24 '18 at 09:03

You can't "get" the viewport height as such, in the way that you can with JS to store it in a variable, but you can use it in calc() to change the height of elements. For example, height: calc( 100vh - 50px ); which would equate to "the window height less 50px".

score 6 · Answer 2 · answered Jul 24 '18 at 07:40

6

In this case I suggest you to use vh (hundreds of viewport height): If you set height: 100vh; it would take 100% height of each screen.

Code Example

answered Jul 24 '18 at 07:40

besartm

558
1
7
14

If I use 100%, which would also take 100% of each screen. – Raghul Jul 24 '18 at 08:37

Shahriat Hossain · Answer 3 · 2018-07-24T08:58:15.417

1

You need to use javascript to get screen's information.

edited Jul 24 '18 at 08:58

answered Jul 24 '18 at 05:37

Shahriat Hossain

340
4
12

That is actually correct. Because it can't be done with CSS. – Abdalla Arbab May 09 '20 at 21:53

score 1 · Answer 4 · answered Jul 24 '18 at 07:16

It is not possible using CSS, however you can control the page design using media queries.

Or, you can get the screen height by using screen.height and width by using screen.width. [They are JS properties]

Here is a basic JS code of doing this:

console.log("Width: "+screen.width+": Height: "+screen.height);

css: How to get screen height in css?

4 Answers4