关于Bootstrap的footer的固定
我梦
12月 18, 2018
当页面内容不够的时候，footer要保证在浏览器底部，内容足够铺满屏幕时，footer在内容下方。通常的做法是给html、body添加height:100%或min-height:100%以及javascript来控制高度。
在bootstrap里，可以借助flex和calc函数来更方便的布置footer。只要给最外围盒子添加min-height: calc(100vh)的样式。
<body>
<div class="d-flex flex-column" style="min-height: calc(100vh);">
<header>头部</header>
<div class="flex-grow-1">内容</div>
<footer>底部</footer>
</div>
</body>