The content on my main page container is being obscured by the content within this DIV:
<div class="navbar navbar-fixed-bottom"></div>
Below is the CSS from the GitHub project (bootstrap sass)
// Code to fix top/bottom navbars when screen real estate permits
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
border-width: 0 0 1px;
// Reset rounded corners
@media (min-width: $grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
z-index: $zindex-navbar-fixed;
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
The issue appears to be caused by dynamically rendered JS content loading after the initial page load.
Is there a solution without pre-determining the vertical height of the JS-generated content?
UPDATE
Here is the CSS for the container DIV above the navbar:
<!-- Long list of CSS properties omitted for brevity -->