Bootstrap4 footer粘性页脚/动态页脚高度

5个月前 394次点击 来自 前端

标签: BootStrap4

Bootstrap4提供了fixed-bottom让footer固定到底部,但是会遮挡住内容:

<footer class="fixed-bottom bg-dark">    
    <div class="text-center">
        <p>Footer</p>
    </div>
</footer>

改造如下即可高度自适应:

<body>
    <wrapper class="d-flex flex-column">
        <nav>
        </nav>
        <main class="flex-fill">
        </main>
        <footer>
        </footer>
    </wrapper>
</body>

body, wrapper {
   min-height:100vh;
}

.flex-fill {
   flex:1 1 auto;
}
Card image cap
开发者雷

尘世间一个小小的开发者,每天增加一些无聊的知识,就不会无聊了

要加油~~~

技术文档 >> 系列应用 >>
热推应用
Let'sLearnSwift
学习Swift的入门教程
PyPie
Python is as good as Pie
标签