jovan jovan - 4 months ago 14
CSS Question

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

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

<body>
tag.

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
body
of the page is not longer vertically than the browser window.

However, when the
body
overflows (and scrollbars appear), then the
90%
maximum height above is relative to the height of the
body
, 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.

Answer

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:

http://api.jquery.com/height/

// Returns height of browser viewport

$( window ).height();

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