15 replies

Min height of content, preferred of screen with max

I'm making a landing page and I want the first section to take up full screen (or more if needed for content and padding) but also have some kind of max height, it can be a fixed number or something related to screen width if it works (like

max-height: 150vw

max-height: 150vw

) but at the moment I can't come up with anything.

I made a codepen and at the moment it has

min-height: 100vh

min-height: 100vh

on the first section and in screenshot 1 you can see it works as intended, it also grows to more than 100vh if the screen is smaller than content+padding.

However, if I zoom out (screenshot 2) then it still takes up all of the screen (as expected with 100vh) and I really don't want that to happen. Is there a way to do that? I tried something like