The project I am currently working on is a massive website that we cannot tackle all at once. As a result, we are developing it in phases. The challenge we are facing is transitioning from a 1990s table-based structure to a modern Bootstrap-divs responsive design. This means that consistency is key when we release each phase, ensuring that the appearance remains uniform across the entire site.
In essence, the header and footer need to maintain a consistent look and functionality between non-responsive (table-based) and responsive (Bootstrap) pages. While the header has already been made responsive, the rest of the site is not yet coded in a responsive manner.
My current issue lies in the fact that the header, fixed to the top of the page, is responsive. However, since the page content lacks responsive coding, a scrollbar appears at the bottom. Additionally, my footer, which needs to stay at 100% width and remain fixed at the bottom, is refusing to cooperate without compromising its responsiveness.
I have created a codepen to illustrate this issue using a basic vanilla page. You can view it here
Here is the CSS code for the footer:
footer{
width:100%;
background:#ddd;
height:35px;
}
Strangely, applying position: absolute and bottom:0 to the footer, which should keep it at the bottom of the page, actually causes it to move to the center instead!