I've been tasked with recreating the designer's layout using Bootstrap. The desired layout consists of two full-width bars and a fixed container for the main content and footer menu.
I have successfully implemented this layout, including responsiveness for smaller screens, as shown in the code below. However, I am facing an issue where the footer menu overlaps the main container when there isn't enough vertical space on the screen.
What am I missing here and how can I ensure that the footer menu only overflows the screen when the main container lacks sufficient vertical space?
Here is the HTML code:
<!-- Top decorative bar 3 pixels -->
<div class="container-fluid">
<div class="row header-full"></div>
</div>
... (remaining HTML code omitted for brevity) ...
And the accompanying CSS:
.header-full, .footer-full{
background-color: #318fbc;
}
... (remaining CSS code omitted for brevity) ...
* UPDATE * I forgot to mention that the footer menu should always be at the bottom of the page, even if the content is short. It should align with the end of the content when it exceeds the height of the window.
Below is a depiction of the current layout without client information. The blue decorative bars represent the two full-width bars.
Additionally, here is the problem that occurs when the window height is too small.