How to specify max-height css property to Screen size

Question

I am trying with the following style:

.scrollDiv {     height:auto;     max-height:100%;     overflow:auto;    } 

My Requirement is:

1. max-height of div is equal to screen height
2. If the content in the div exceeds screen size, then scroll bars should come in div.

Answer 1

Use CSS Viewport units for this.

Example:

.scrollDiv {     max-height: 100vh;     overflow: auto; } 

More info: https://www.w3schools.com/cssref/css_units.asp

Answer 2

You can use $(window).height() to set the max-height to screen height:

$('.scrollDiv').css('max-height', $(window).height()); 

UPDATE

As mentioned in the John's answer. With the latest CSS3 API you can use vh's(View port unit for height)

.scrollDiv {     max-height: 100vh;     overflow: auto; }