CODEWITHSUNDEEP
javascripthtmlcss
Butchi Reddy Velagala
Butchi Reddy Velagala

Reputation: 864

How to specify max-height css property to Screen size

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.

Upvotes: 59

Views: 164921

Answers (3)

James
James

Reputation: 2964

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;
}

Upvotes: 31

John Rix
John Rix

Reputation: 6683

Use CSS Viewport units for this.

Example:

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

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

Upvotes: 149

Aditya Ponkshe
Aditya Ponkshe

Reputation: 3890

Scroll bar appears only when content is overflown.

If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.

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

Upvotes: 19

Related Questions