Getting my footer right

[RAbels]

In the mobile version of the website, the gray part at the bottom of the page is automatically extended if there isn’t enough content. How can I get this gray part to have the same height as the footer?

(Obviously, I need the footer to be at the bottom of the page, without too much white space above it.)

---

Here is my public share link: https://preview.webflow.com/preview/beta1058?preview=e27784aa35f51b1519aec185514ae077
(how to access public share link)

[McGuire]

Here’s a YouTube video that shows how to use flexbox to accomplish this on your website:

- YouTube

Edit: You’ll see I pulled your menu into the content section. This is because we set the content div min height to 100vh, and when the menu is on top in mobile view, the content PLUS the 100vh min height can push things down beyond 100vh.

This method is based on an incredible video made by @Mat and the Webflow team: Flexbox | Webflow University

[RAbels]

This does solve my problem to a great extend. However, the Section has a set height this way. This means that it doesn’t automatically extend if I add more blocks. And there is a lot of white space now. Is it possible for the height of Section to be automatically adapted to a number of blocks that are in it?

[McGuire]

Okay, let’s do this. Seven steps:

Try (1) removing the flex option (fill empty space) from the section class. Select your footer element and (2) choose fill empty space for that element. Then, (3) set the position for the footer to relative. (4) Add a class to the container that’s inside of the footer, maybe call it footer container, and (5) set its position to absolute. (6) Center it by position it 0px left and 0px right, with a top value of 50%. (7) Transform it up Y = -50%, which will complete the vertical centering.

Screenshots for steps 5-7:

Edit: To clarify, the section as we previously did this (in the video) does not have a set height as you mentioned above. It’s simply expanding to fill empty space. The reason it appears this way is because your link blocks have their positioning set to absolute, so the section div isn’t taking into account their height.