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?

Answer 1

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".