The content that is being created in my container on the main page is overridden by the contents 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 believe this is due to the rendering of the JS content after the page loads.
Is there a way to fix this without knowing the heights of the vertical content of JS ahead of time?
EDIT
Here is the CSS for the DIV container above the navigation bar:
-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: