html - Bootstrap3 粘性页脚与 react 内容重叠

标签 html css r twitter-bootstrap

我将 bootstrap 与 Shiny 和 R 结合使用。但这并不重要,因为 Shiny 只是使用普通的 bootstrap 安装。

所以我的页脚是这样编码的:

/* Sticky Footer */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}

.footer {
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  background-color: #f5f5f5;
}
/* End Sticky Footer

基本上它工作得很好。我猜在加载所有内容后调整大小是行不通的。由于即使在加载 HTML 代码等之后 R 也会在后台进行大量计算,因此加载后页面的大小通常会变得相当大。但是后来我的粘性页脚与内容重叠,我现在一整天都在为此苦苦挣扎,还没有找到解决方案。有什么想法吗?

最佳答案

<body>
<div id="wrapper">
<div id="main-content">

</div>

<footer>
</footer>
</div>
</body>

CSS:

body,html {
height: 100%;
}

body {
min-height: 100%;
}

#wrapper {
height: 100%;
position: relative;
}

#main-content {
background-color: red;
height: 1000px;
width: 100%;
}

footer {
clear: both;
position: static;
bottom: 0;
height: 40px;
width: 100%;
background-color: blue;
}

示例:https://jsfiddle.net/a5xtu95z/

我对 Bootstrap 没有太多经验,但我不明白为什么这行不通?

关于html - Bootstrap3 粘性页脚与 react 内容重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30215705/

相关文章:

R中igraph中的R倒数边

html - 在标题中的图像上构建文本

html - CSS - float :left on a div not taking out of flow

css - 无论滚动位置如何,iframe 顶部的 Bootstrap 模式。如何在屏幕上定位它?

html - Z 索引定位无法正常工作

r - split 和 data.table 的问题

R中的SQL查询将两个日期作为参数传递

javascript - 如何将标签的innerHTML渲染为嵌套HTML

javascript - jquery Slide Toggle 不适用于每个 div

javascript - HTML5 canvas 正在调整我的图片大小