Question

我使用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也在后台计算很多，因此加载后页面的大小通常会变得非常大。但是后来我的粘性页脚与内容重叠，我现在整天都在努力解决这个问题，但尚未找到解决方案。有什么想法吗？

Answer 1

<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的经验，但我不明白为什么这不起作用？

Answer 2

请尝试使用粘性页脚布局的参考链接 http://getbootstrap.com/examples/sticky-footer-navbar/

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
/* Margin bottom by footer height */
 margin-bottom: 60px;
}
.footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     /* Set the fixed height of the footer here */
     height: 60px;
     background-color: #f5f5f5;
}

Bootstrap3粘性页脚重叠反应内容

2 个答案: