Set the footer coding to "bottom" for it to stay at the bottom of the Web page. A website footer may appear in the middle of the Web page and not on the bottom for a number of reasons. One of the most common is that the website content is small and the footer is pushed up to the middle. The " " containers with the footer may be coded incorrectly, the margins or padding may be wrong and the "float" property could be wrong. The footer CSS "position" property determines where the footer is positioned on the Web page in relation to the other page elements, like the header and the main body content.
Keeping the Footer at the Bottom with CSS-Grid
Why Is My Footer at the Middle of My Webpage? | newwebsitemarketsearch.com
How to keep your footer where it belongs ?
The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window. There was a wrapping element that held everything except the footer.
A footer is the last element on the page. At a minimum it is at the bottom of the viewport, or lower if the page content is taller than the viewport. Simple, right?