While I can't say for sure if this is the exact solution you're seeking, it may provide some assistance.
To ensure that your footer remains at the bottom of every page, regardless of the content's length, you will need what is commonly referred to as a "sticky" footer. There are various methods available online, but here is one approach which involves knowing the height of your footer div.
Start by removing your footer div from the wrapper and placing it after the closing div tag that corresponds to #wrapper. Then, add the following CSS properties:
padding-bottom: 140px;
box-sizing: border-box;
to the #wrapper selector in your stylesheet. It's crucial that the padding value matches the height of your footer. The box-sizing property ensures that the padding doesn't increase the total height, preventing unnecessary scrollbars unless needed.
Next, eliminate
position: absolute;
bottom: 0;
clear: both;
from the #footer selector - these are no longer necessary. Instead, include margin-top: -140px;
Lastly, confirm that the following rules are included in your CSS:
body {
height: 100%
}
html {
height: 100%
}
This method aims to prevent any overlap between the footer and content, ensuring the footer always stays at the page's bottom unless additional content pushes it further down.