Twitter bootstrap 3 引导中的页脚，随内容延伸或粘贴到底部
我一直在寻找一种方法来添加一个页脚到一个Twitter Bootstrap3项目，我正在工作 我想要的是，当内容太短而无法填满屏幕时，页脚会粘在页面底部，但当内容填满屏幕时，页脚会被内容压下 到目前为止，我找到并尝试过的所有解决方案要么不起作用，要么总是显示页脚，要么页脚位于页面下方，因此只有在滚动时才可见 提前谢谢 2019年更新 “固定”页脚和“粘性”页脚之间有区别。。。你想要粘脚 引导3 使用标准的“粘性页脚”示例。此方法包装整个页面内容并向下推页脚 下面是一个工作演示：Twitter bootstrap 3 引导中的页脚，随内容延伸或粘贴到底部,twitter-bootstrap-3,bootstrap-4,sticky-footer,Twitter Bootstrap 3,Bootstrap 4,Sticky Footer,我一直在寻找一种方法来添加一个页脚到一个Twitter Bootstrap3项目，我正在工作 我想要的是，当内容太短而无法填满屏幕时，页脚会粘在页面底部，但当内容填满屏幕时，页脚会被内容压下 到目前为止，我找到并尝试过的所有解决方案要么不起作用，要么总是显示页脚，要么页脚位于页面下方，因此只有在滚动时才可见 提前谢谢 2019年更新 “固定”页脚和“粘性”页脚之间有区别。。。你想要粘脚 引导3 使用标准的“粘性页脚”示例。此方法包装整个页面内容并向下推页脚 下面是一个工作演示： ... 页脚
...
页脚
/*粘性页脚样式
-------------------------------------------------- */
html，
身体{
身高：100%；
/*html和body元素不能有任何填充或边距*/
}
/*页面内容下推页脚的包装器*/
#包裹{
最小高度：100%；
高度：自动！重要；
身高：100%；
/*按页脚高度负缩进页脚*/
保证金：0自动-60像素；
/*按页脚高度填充底部*/
填充：0 60px；
}
/*在此处设置页脚的固定高度*/
#页脚{
高度：60px；
背景色：#F5；
}
引导4 因为flexbox在引导程序4中是默认的，所以“粘性”页脚更容易
<wrapper class="d-flex flex-column">
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</wrapper>
body, wrapper {
min-height:100vh;
}
main {
flex:1;
}
衣身{
最小高度：100vh；
}
主要{
弹性：1；
}
/*Sticky footer*/
form , html, body {height: 100%;}
body{background-color:inherit;}
.wrapper{min-height:100%;height:auto!important;height:100%;margin:0 auto -4em}
.footer,.push{height:4em}
……内容。。。。
版权所有2014 | menelabs
#主{
最小高度：70vh；
}
页眉：粘性页脚示例
-
-
-
内容1:Lorem ipsum，或者有时称为lipsum，是用于布置印刷品、图形或网页设计的虚拟文本
内容0
内容1
内容2
内容3
内容4
内容5
内容6
页脚
/*Sticky footer*/
form , html, body {height: 100%;}
body{background-color:inherit;}
.wrapper{min-height:100%;height:auto!important;height:100%;margin:0 auto -4em}
.footer,.push{height:4em}
<body>
<div class="wrapper">
....Content....
<div class="push"></div>
</div>
<div class="footer">
<div class="container">
<hr />
<span>copyright 2014 | menelabs</span>
</div>
</div>
</body>