Menu
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.
730
You can not control the size of the window. You can use CSS to set min-width and min-height properties to ensure your page layout stays sane. using 'window. open' I can open a page with a fixed height width.
Try setting the height of the html element to 100% as well. Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well. However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.
Use the viewport-percentage lengths.
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
.modalbox {
max-height: 90vh; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
