Currently working on a website project utilizing Bootstrap 3 (http://www.patrickmanser.ch/fnws) and I am trying to implement a sticky footer. After adapting the code snippets from Bootstrap 3 examples according to my specifications, everything seems to function flawlessly on a standard desktop display. However, upon transitioning to mobile-sized screens, an issue arises where the footer overlaps the content. My assumption is that this occurs due to the changing height of the footer, as it aligns with the grid system I have implemented there. Feel free to examine the source code (main.css); nevertheless, the key segments involved are detailed below:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 237px;
overflow-y: scroll;
background-color: #eee;
}
#page-footer {
position: absolute;
bottom: 0;
min-height: 200px;
background-color: #333;
width: 100%;
color: #999;
}
.copyright {
background-color: #222;
min-height: 50px;
color: #666;
width: 100%;
text-align: center;
line-height: 50px;
}
At present, I am uncertain about the optimal resolution for this issue or if there exists a feasible solution at all. Any guidance provided would be highly valued!