How to fill the gap between footer and content area

To get a result like this structure I set a gray background on the body tag and set a maximum width of 900px for all sections (navigation, content area, and footer). The footer is pinned at the bottom using the flexbox.

The problem:
On the pages where content is too little, a gap is appearing. What could be the best way to extend the white container to fill that gap?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Could you share a read-only link to see if I can help you?

1 Like

Here is read only link

If you want a fullscreen website (no scrolling) you could just set the height of elements with vh


Navbar 5vh
Main Content 85vh
Footer 10vh

If not, just change the footer to position static and keep adding elements to the content or set a size of for example 100vh to the content section and you will see that there won’t be any gap with the footer :slight_smile:

Let me know if this solves your problem

Yeah, setting the min height to 100vh solved the issue :relaxed:

Thank you Quitos

1 Like