Bootstrap Navbar-fixed-bottom div overlaps JS rendered content

Question

The content that generates in my main page container is overlapped by the content of this DIV:

<div class="navbar navbar-fixed-bottom"></div>

Here is the CSS from the github project (bootstrap sass)

// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  border-width: 0 0 1px;

  // Undo the 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; // override .navbar defaults
}

I belive this is occuring due to JS rendered content rendering after the page is loaded.

Is there any way to fix this without knowing the vertical height of the JS content ahead of time?

EDIT

Here is the CSS for the container DIV above the navbar:

-webkit-animation-delay: 0s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0s;
-webkit-animation-fill-mode: none;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: none;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: ease;
-webkit-app-region: no-drag;
-webkit-appearance: none;
-webkit-backface-visibility: visible;
-webkit-background-clip: border-box;
-webkit-background-composite: source-over;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-border-fit: border;
-webkit-border-horizontal-spacing: 0px;
-webkit-border-image: none;
-webkit-border-vertical-spacing: 0px;
-webkit-box-align: stretch;
-webkit-box-decoration-break: slice;
-webkit-box-direction: normal;
-webkit-box-flex: 0;
-webkit-box-flex-group: 1;
-webkit-box-lines: single;
-webkit-box-ordinal-group: 1;
-webkit-box-orient: horizontal;
-webkit-box-pack: start;
-webkit-box-reflect: none;
-webkit-box-shadow: none;
-webkit-clip-path: none;
-webkit-column-axis: auto;
-webkit-column-break-after: auto;
-webkit-column-break-before: auto;
-webkit-column-break-inside: auto;
-webkit-column-count: auto;
-webkit-column-gap: normal;
-webkit-column-progression: normal;
-webkit-column-rule-color: rgb(51, 51, 51);
-webkit-column-rule-style: none;
-webkit-column-rule-width: 0px;
-webkit-column-span: none;
-webkit-column-width: auto;
-webkit-filter: none;
-webkit-font-kerning: auto;
-webkit-font-smoothing: auto;
-webkit-font-variant-ligatures: normal;
-webkit-highlight: none;
-webkit-hyphenate-character: auto;
-webkit-hyphenate-limit-after: auto;
-webkit-hyphenate-limit-before: auto;
-webkit-hyphenate-limit-lines: no-limit;
-webkit-hyphens: manual;
-webkit-line-align: none;
-webkit-line-box-contain: block inline replaced;
-webkit-line-break: auto;
-webkit-line-clamp: none;
-webkit-line-grid: none;
-webkit-line-snap: none;
-webkit-locale: auto;
-webkit-margin-after-collapse: collapse;
-webkit-margin-before-collapse: collapse;
-webkit-marquee-direction: auto;
-webkit-marquee-increment: 6px;
-webkit-marquee-repetition: infinite;
-webkit-marquee-style: scroll;
-webkit-mask-box-image: none;
-webkit-mask-box-image-outset: 0px;
-webkit-mask-box-image-repeat: stretch;
-webkit-mask-box-image-slice: 0 fill;
-webkit-mask-box-image-source: none;
-webkit-mask-box-image-width: auto;
-webkit-mask-clip: border-box;
-webkit-mask-composite: source-over;
-webkit-mask-image: none;
-webkit-mask-origin: border-box;
-webkit-mask-position: 0% 0%;
-webkit-mask-repeat: repeat;
-webkit-mask-size: auto;
-webkit-perspective: none;
-webkit-perspective-origin: 585px 196px;
-webkit-print-color-adjust: economy;
-webkit-rtl-ordering: logical;
-webkit-svg-shadow: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392);
-webkit-text-combine: none;
-webkit-text-decorations-in-effect: none;
-webkit-text-emphasis-color: rgb(51, 51, 51);
-webkit-text-emphasis-position: over;
-webkit-text-emphasis-style: none;
-webkit-text-fill-color: rgb(51, 51, 51);
-webkit-text-orientation: vertical-right;
-webkit-text-security: none;
-webkit-text-stroke-color: rgb(51, 51, 51);
-webkit-text-stroke-width: 0px;
-webkit-transform: none;
-webkit-transform-origin: 585px 196px;
-webkit-transform-style: flat;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
-webkit-user-drag: auto;
-webkit-user-modify: read-only;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
align-content: stretch;
align-items: stretch;
align-self: stretch;
alignment-baseline: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
baseline-shift: baseline;
border-bottom-color: rgb(51, 51, 51);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(51, 51, 51);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(51, 51, 51);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(51, 51, 51);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
bottom: auto;
box-shadow: none;
box-sizing: content-box;
buffered-rendering: auto;
caption-side: top;
clear: none;
clip: auto;
clip-path: none;
clip-rule: nonzero;
color: rgb(51, 51, 51);
color-interpolation: srgb;
color-interpolation-filters: linearrgb;
color-rendering: auto;
cursor: auto;
direction: ltr;
display: block;
dominant-baseline: auto;
empty-cells: show;
fill: #000000;
fill-opacity: 1;
fill-rule: nonzero;
filter: none;
flex-basis: auto;
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
flex-wrap: nowrap;
float: none;
flood-color: rgb(0, 0, 0);
flood-opacity: 1;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
glyph-orientation-horizontal: 0deg;
glyph-orientation-vertical: auto;
height: 392px;
image-rendering: auto;
justify-content: flex-start;
kerning: 0;
left: auto;
letter-spacing: normal;
lighting-color: rgb(255, 255, 255);
line-height: 20px;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin-bottom: 0px;
margin-left: 367.5px;
margin-right: 367.5px;
margin-top: 0px;
marker-end: none;
marker-mid: none;
marker-start: none;
mask: none;
mask-type: luminance;
max-height: none;
max-width: none;
min-height: 0px;
min-width: 0px;
opacity: 1;
order: 0;
orphans: auto;
outline-color: rgb(51, 51, 51);
outline-offset: 0px;
outline-style: none;
outline-width: 0px;
overflow-wrap: normal;
overflow-x: visible;
overflow-y: visible;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
page-break-after: auto;
page-break-before: auto;
page-break-inside: auto;
pointer-events: auto;
position: static;
resize: none;
right: auto;
shape-rendering: auto;
speak: normal;
stop-color: rgb(0, 0, 0);
stop-opacity: 1;
stroke: none;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-width: 1;
tab-size: 8;
table-layout: auto;
text-align: start;
text-anchor: start;
text-decoration: none;
text-indent: 0px;
text-overflow: clip;
text-rendering: auto;
text-shadow: none;
text-transform: none;
top: auto;
transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;
unicode-bidi: normal;
vector-effect: none;
vertical-align: baseline;
visibility: visible;
white-space: normal;
widows: auto;
width: 1170px;
word-break: normal;
word-spacing: 0px;
word-wrap: normal;
writing-mode: lr-tb;
z-index: auto;
zoom: 1;

Answer 1

The default z-index for fixed navbars is 1030, as such it will appear above most content at the bottom of your screen.

You can try adding the following CSS as suggested in the bootstrap documentation: http://getbootstrap.com/components/#navbar-fixed-bottom

body { padding-bottom: 70px; }

Unfortunately, if you have enough content that scrolling is required, it will still appear behind the menu until you reach the bottom of the page. Once you're at the bottom of the page, the padding you've added to the body should push the content above the navbar, which has a default height of 50px.

Edit: If you want it at the bottom but no floating, you'll have to render the navbar last in your HTML.

<body>
  <div class="container><!-- Content --></div>
  <footer><!-- Footer Content --></footer>
  <div class="navbar navbar-default" style="margin-bottom:0px;margin-left:0px;margin-right:0px;clear:both;"><!-- Navbar Code --></div>
</body>

The problem with this is that without enough content, the navbar can appear above the bottom of the browser window, but it will be at the bottom of the content.

There are other CSS hacks that can be used, but they may likely interfere with bootstrap's styles and cause additional rendering problems.

One example I found, but haven't tested with bootstrap: http://ryanfait.com/html5-sticky-footer/