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:

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

Why not use the scroll bar that would normally appear on the window? — codefactor, Dec 10 '13 at 07:42
http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window — socketpair, Jun 11 '15 at 19:04

score 142 · Answer 1 · edited Apr 26 '17 at 15:55

142

Use CSS Viewport units for this.

Example:

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

edited Apr 26 '17 at 15:55

Paul Roub

answered Apr 26 '17 at 15:52

John Rix

This is the one that worked for me. I did have to set max-height to 77vh for my case. – naveed Nov 02 '17 at 23:55
@JohnRix not the downvoter, but 1) CSSFools, and 2) .asp are both good reasons to downvote IMVHO – user234461 Oct 23 '18 at 13:14
3

This answer is amazing, thank you! And @user234461 is probably right, people really don't like w3schools. – forgivenson Feb 08 '19 at 21:55
1

I guess it seems to have fallen out of favour a little over the years (though perhaps not so much so as the likes of SourceForge!). I still find it answers most of my questions when Google gives it back to me as a search result though. – John Rix Feb 09 '19 at 00:07
1

Right there with you John. If often answers the question quickly and simply. More often than not... that is good enough. Either way this is the best answer to the question presented. – Jeremy A. West Jan 17 '20 at 16:21
This is the first time I've seen vh or vw... What rock have I been hiding under? Awesome! – Benj Sanders Oct 11 '21 at 04:33
Absolutely excellent.. didn't know about vh, thanks! – Jobbo Apr 21 '23 at 21:45

James · Answer 2 · 2018-11-05T16:34:13.893

29

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

edited Nov 05 '18 at 16:34

answered Dec 10 '13 at 07:31

James

Using JavaScript is a massive pain compared to pure CSS as the code would have to be called every time the window was resized. – user234461 Oct 23 '18 at 13:16

score 19 · Accepted Answer · answered Dec 10 '13 at 07:19

19

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

answered Dec 10 '13 at 07:19

Aditya Ponkshe

Not sure if this answer is relevant, but I wanted to point out that it is easy to make the scroll bar visible even if nothing over flows. overflow:scroll; – codefactor Dec 10 '13 at 07:40
1

no i meant if he wants to tee scroll bar 'when' content is overflown, in his case content will never overflow and what's the point of a scroll bar if content is not overflown? – Aditya Ponkshe Dec 10 '13 at 08:03
How would you not allow anything in the div to exceed the height and width? In other words, the max height and max widtth is based on the screen size. – eyedfox Sep 08 '18 at 15:15

3 Answers3