Empty space at the bottom

Hello everyone! There was such a problem: an empty space appeared at the bottom of the page. It is not displayed in DevTools, so neither margin nor padding help.


Code:

1 Like

Hopefully I’ve understood your problem correctly - you want the footer to be at the bottom of the page, right?

Since you have already given your body a height of 100vh, you can push the footer to the bottom of the screen by giving your main section a height of 100% as follows:

main {
  height: 100%;
}

You can play with this to get the result you want, but basically the space at the bottom of the footer is there because the footer stays under the main section, which is not filling the screen because it isn’t given a height.

Not quite. After the entire html section, an empty space is created (this can be seen in the screenshot) and no additional styles help

I’m not sure if you changed something, but I’m not seeing the same:

I’m using the current code from your codepen link.

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