twitter-bootstrap Bootstrap Navbar-fixed-bottom div 与 JS 渲染的内容重叠

Bootstrap Navbar-fixed-bottom div overlaps JS rendered content

提问by Abram

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

在我的主页容器中生成的内容与此 DIV 的内容重叠：

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

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

这是来自 github 项目的 CSS (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.

我相信这是由于页面加载后 JS 呈现的内容呈现而发生的。

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

有没有办法在不提前知道 JS 内容的垂直高度的情况下解决这个问题？

EDIT

编辑

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

这是导航栏上方容器 DIV 的 CSS：

-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;

回答by MeyerRJ

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

固定导航栏的默认 z-index 为 1030，因此它会出现在屏幕底部的大多数内容上方。

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

您可以尝试按照引导程序文档中的建议添加以下 CSS：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.

不幸的是，如果您有足够的内容需要滚动，它仍会出现在菜单后面，直到您到达页面底部。到达页面底部后，您添加到正文的内边距应将内容推送到导航栏上方，导航栏的默认高度为 50 像素。

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

编辑：如果您希望它位于底部但不浮动，则必须在 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.

还有其他一些 CSS hack 可以使用，但它们可能会干扰引导程序的样式并导致其他渲染问题。

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

我发现的一个例子，但没有用引导程序测试过：http: //ryanfait.com/html5-sticky-footer/