100vh with fallback if content higher than viewport?

Question

Content in the viewport is fluid so when viewed on a smaller device the content height exceeds the 100vh. I was thinking of just using JS to calc the min-height of content blocks. Any ideas on a straight on if there is CSS approach? Cannot think of much... but maybe other smart folks can :-)

 .content.intro { height: 100vh; min-height: 800px; // content can be higher than this display: flex; align-items: center; justify-content: center; margin-top: -80px; padding-top: 80px; // adjust for the 80px header at top } 

Answer 1

Thanks for the comments. In this case it's a block of copy that can exceed the height of 100vh, because it's centered in flex layout it was clipping the text at smaller heights. My solution was just some simple JS triggered on load and resize:

 setMinHeight : function() { $('.content.intro').each(function() { var bodyCopy = $(this).find('.bodyCopy'), padTop = $(this).css('padding-top').substring(0,2), padBottom = $(this).css('padding-bottom').substring(0,2); minHeight = bodyCopy.outerHeight(true) + parseInt(padTop) + parseInt(padBottom) + $('header').outerHeight(); $(this).css( { 'min-height' : minHeight + 'px' }); }); } 

Basically just set min-height of bodyCopy so the viewport is never smaller that the content inside it.

In my case -> content height + top/bottom padding of parent + height of header to stop overlapping