Footer no longer sticks to bottom of page in 2.0.0-beta.22

[LichLord91]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

It seems that the latest 2.0.0-beta.22 changed the footer behavior to no longer stick to the bottom of the screen as it did in previous iterations. Going through the changelogs I did not see anything that would indicate this behavior change (ofc I could have missed this)

This issue becomes more apparent with a shorter footer and short pages , however if you maximize some of the larger pages it'll happen too.

Examples in beta.22

My site:
https://62c8a564ff781b0008fdb9ec--lichdocs.netlify.app/test3/

https://docusaurus.io/docs/playground
Docusaurus Site:

Example in beta.21

my site: https://62c78fd7a6bde2000abc5216--lichdocs.netlify.app/test3/test-4/

https://stackblitz.com/edit/github-rcr1hm?file=package.json
Stackblitz Playground of Docusaurus beta.21

Reproducible demo

No response

Steps to reproduce

1. Go to site with beta.22 installed
2. Either go to a small page and see that the footer bar does not stick to the bottom or scroll out a few longer pages to see the same behavior. (longer pages seem to stick)

Expected behavior

Footer should not be contained with the page contents and stick to the bottom of screen.

Actual behavior

Footer wraps with page content instead of sticking to bottom of screen.

Your environment

• Public source code: its private but this issue is on the main Docsusaurus Site as well
• Public site URL: https://docs.lichcraft.games/ (2.0.0-beta.21 version) https://62c8a564ff781b0008fdb9ec--lichdocs.netlify.app/ (2.0.0-beta.22 version)
• Docusaurus version used: 2.0.0-beta.22
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node.js 16.5, Netlify
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu 20.04 LTS

Self-service

• I'd be willing to fix this bug myself.

[LichLord91]

Setting Html and Body to height: 100%; seemed to fix this. Did it in my custom css

html , body {
	height: 100%;
  }

This is set in the Layout/styles.module.css , i noticed that there was updates to Layout and its css stylesheet in beta.22 . Seems that this style isn't being applied correctly.

[Josh-Cena]

@LichLord91 Could you try removing the :global on line 1 and 14 locally? If that works you can send a PR.

[LichLord91]

@Josh-Cena that worked... could have sworn I tried that 😓 maybe I didn't save the file before rebuilding haha. Okay pull request sent and CLA signed. Glad I could contribute back albeit the tiniest change ever 🤣 .