Bootstrap Navbar-fixed-bottom div与JS呈现的内容重叠 [英] Bootstrap Navbar-fixed-bottom div overlaps JS rendered content

问题描述

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

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

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

这是github项目中的CSS（bootstrap sass）

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
}

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

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?

编辑

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

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;

推荐答案

固定导航栏的默认z索引为1030，因此，它将显示在屏幕底部大多数内容的上方。

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

您可以尝试按照引导文档中的建议添加以下CSS：
http://getbootstrap.com/components/#navbar-fixed-bottom

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

body { padding-bottom: 70px; }

不幸的是，如果您有足够的内容需要滚动，它将仍然显示在菜单后面，直到您到达页面的底部。一旦进入页面底部，添加到正文中的填充应将内容推到导航栏上方，导航栏的默认高度为50px。

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.

编辑：
如果要在底部显示但不浮动，则必须在HTML的最后显示导航栏。

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.

还有其他CSS

我发现了一个示例，但尚未使用bootstrap进行测试：$ b可以使用，但它们可能会干扰bootstrap的样式并引起其他渲染问题。 $ b http://ryanfait.com/html5-sticky-footer/

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

这篇关于Bootstrap Navbar-fixed-bottom div与JS呈现的内容重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！