Designating percentages of pages

Designating percentages of pages
0

#1

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!


#2

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!