Designating percentages of pages

Hey all. I’m working on my random quote machine, and before I get too deep into the JS I want to make sure it looks the way I’d like it to. I have the heading and subheading in their own section and the actual input/output stuff below. What I’d like is for the header and subheader, with their maroon background, to take up 33% of the page height and the other 67% be the input/output with the gray background.

Here is the link to the pen as it is currently: https://codepen.io/kaydeejay/pen/baBerY

Thanks for any help, feel free to critique other aspects of the code you may find messy!

Easiest approach for that would be to use viewport height (vh) for your container (min-height:100vh) and header (height:33vh).

Take a little time to read about viewport-relative units, they are awesome!

2 Likes