我一直在寻找一种向我正在开发的Twitter Bootstrap 3项目添加页脚的方法。
我想要的是，当内容太短而无法填满屏幕时，页脚会停留在页面底部，但是当内容确实填满屏幕时，它就会被内容压低。
到目前为止，我找到并尝试过的所有解决方案都无效，或者始终显示页脚，或者页脚位于页面下方，因此仅在滚动时可见。
提前致谢！
“固定”页脚和“粘性”页脚之间有区别...您想要粘性页脚。
引导程序3
使用标准的“ Sticky Footer”示例。此方法包装整个页面内容，并将页脚向下推。
这是一个有效的演示：http : //bootply.com/93620
<!-- Wrap all page content -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
...
</div>
<div class="container">
<!-- page content -->
</div>
</div>
<div id="footer">
Footer
</div>
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
引导程序4
因为在Bootstrap 4中默认使用flexbox，所以“粘性”页脚更加容易。
<wrapper class="d-flex flex-column">
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</wrapper>
body, wrapper {
min-height:100vh;
}
main {
flex:1;
}
另一种情况是始终在底部的底部页脚，而内容不会将其推到视口下方。而是根据需要滚动内容区域而不是正文。这是全高度的“应用”布局。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句