我将 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/