Expanding section to fill the screen

Hi, I want to ask if it’s possible to fill the entire screen. I’ve tried with adding height: 100vh; to the inline CSS, however this makes the section the actual size of the screen, and when I have header and the bar below, it creates extra unnecessary space.

What I want is to fill only the visible section of the screen until the bottom bar

Hey @vlntnt,

What you’ve done is a good start. 100vh value will push other elements outside of the viewport though so you will want to reduce it or specifically, deduct the height of your header and footer from it. You can reduce 100vh until you arrive at the height you need or if you’re comfortable with a more technical value, you can use the calc CSS function like calc(100vh - 300px) where 300px is the combined height of your header and footer.

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.