When the content on an HTML page is minimal, the footer may end up positioned halfway up the page, creating a blank space below. This can be unappealing, especially on larger screens. Designers are frequently tasked with moving footers to the bottom of the viewport, but accomplishing this isn't always straightforward.
The structure of my HTML looks like this:
<html>
<body>
<div class="wrapper">
....
</div>
<div class="footer" id="cdFooter">
.......
</div>
</body>
</html>
I attempted to follow advice from the Internet by setting the CSS rules as follows:
html,body {
position: relative;
min-height: 100%;
}
.wrapper {
min-height:100%;
position: relative;
overflow:hidden !important;
}
.footer {
bottom: 0;
width: 100%;
}
(Additional CSS rules can be found at the URL below, as there's limit for code here.)
Despite implementing these rules, the footer still does not reach the bottom of the browser on large desktop screens. The result can be viewed at the following URL:
Someone suggested adding a rule to the wrapper like margin-bottom: **px, but that did not resolve the issue on my site.
Could someone kindly review my URL and suggest a solution? I prefer a responsive design without using fixed heights to push elements down.
Thank you.
If I use position: absolute, it will override the wrapper. Adding body {height: 100%} also proved ineffective. Can anyone attempt to make edits on my URL?
In my opinion, the key problem lies in making the body height equal to the browser height, similar to how it is defined in html. Hopefully, this approach could solve the issue.