jovan jovan - 8 months ago 35
CSS Question

Setting max-height relative to browser window size, not body size

I have a modal popup box on my site, inside the


This is the styling of the popup:

.modalbox {
text-shadow: none;
position: absolute;
padding: 22px;
left: 50%;
background: white;
z-index: 90;
border-radius: 6px;
display: none;
font-size: 14px;
width: 80%;

Setting the width is simple. However, the vertical content is dynamic and therein my problem lies - I don't want the box to be taller than the browser window.

I've tried setting
max-width: 90%;
, and this works if the
of the page is not longer vertically than the browser window.

However, when the
overflows (and scrollbars appear), then the
maximum height above is relative to the height of the
, not the window. This means that the modal box can overrun out of the window vertically, forcing the user to scroll the page to see its full content.

What I want to accomplish is for that max height to be 90% of the browser window so that the entire modal box is visible at all times.

I will handle overflow, I just need help figuring out how to restrict the vertical size in the way described above.


There isn't a way to do this with html or css as far as I know, you'd have to accomplish this using JQuery:

// Returns height of browser viewport

$( window ).height();

and then just use whatever 90% of the height value is.