I have been working on implementing a sticky footer that I've successfully used in the past for various websites. You can find the link to the original method here:
However, this time I am facing a challenge as I want to make the footer more responsive by avoiding the use of specific pixel heights. Therefore, I attempted to switch to using percentages instead:
html, body {
height: 100%; margin: 0px; padding: 0px;
}
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -25%;
background: lime
}
#spacer{
background: blue;
height: 25%; /* This should be exactly the same as #footer height. */
}
#footer{
background: magenta;
height: 25%;
}
Below is the HTML code structure:
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://localhost/wordpress/wp-content/themes/TesterTheme/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
Place your content here.
</div><!-- End Wrapper -->
<div id="spacer"></div>
<div id="footer">
</div>
</body>
</html>
Even though my measurements confirm that the footer and spacer are indeed set to 25% of the viewport height, an unexpected scrollbar keeps appearing on the browser window. After many hours of troubleshooting and researching possible solutions, I suspect it might have something to do with how percentage heights are calculated based on ancestor elements. In this case, the only ancestors of the footer are the body and html elements. Yet, the issue persists despite efforts to address it. Any guidance or insights into why the calculated percentages are not producing the desired outcome would be greatly appreciated.