When the content on a page is limited, around 300 pixels or so, the footer tends to appear in the center of the page when viewed at a resolution of 1024.
Is there a way to ensure that my footer always stays at the bottom of the page without having to know its specific height?
I attempted to implement this solution:
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
However, I encountered an issue where I had to incorporate padding-bottom: (footerheight); in the element prior to #footer. This presented a problem as the footer height can vary depending on the page...