html – Bootstrap 4 – 粘性页脚 – 动态页脚高度

html – Bootstrap 4 – 粘性页脚 – 动态页脚高度,第1张

概述我需要在我的页面上放一个粘性页脚,但是我的页脚没有确定的高度.在较小的屏幕上 – 行调整大小,页脚变长. 因此,getbootstrap上提供的默认粘性页脚示例不起作用,因为它需要固定的页脚高度. 有没有办法实现这个? /* Sticky footer styles-------------------------------------------------- */html { pos 我需要在我的页面上放一个粘性页脚,但是我的页脚没有确定的高度.在较小的屏幕上 – 行调整大小,页脚变长.

因此,getbootstrap上提供的默认粘性页脚示例不起作用,因为它需要固定的页脚高度.

有没有办法实现这个?

/* Sticky footer styles-------------------------------------------------- */HTML {  position: relative;  min-height: 100%;}body {  /* margin bottom by footer height */  margin-bottom: 60px;}.footer {  position: absolute;  bottom: 0;  wIDth: 100%;  /* Set the fixed height of the footer here */  height: 60px;  line-height: 60px; /* Vertically center the text there */  background-color: #f5f5f5;}/* Custom page CSS-------------------------------------------------- *//* Not required for template or sticky footer method. */body > .container {  padding: 60px 15px 0;}.footer > .container {  padding-right: 15px;  padding-left: 15px;}code {  Font-size: 80%;}
解决方法 现在bootstrap 4是flexBox,可以使用…来粘贴页脚
<wrapper >    <nav>    </nav>    <main >    </main>    <footer>    </footer></wrapper>body,wrapper {   min-height:100vh;}.flex-fill {   flex:1 1 auto;}

演示:Bootstrap 4 Sticky Footer(4.0.0)

注意:flex-fill实用程序类将是included in the next Bootstrap 4.1版本.因此,在该版本之后,将不需要额外的用于flex-fill的CSS.

总结

以上是内存溢出为你收集整理的html – Bootstrap 4 – 粘性页脚 – 动态页脚高度全部内容,希望文章能够帮你解决html – Bootstrap 4 – 粘性页脚 – 动态页脚高度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1104570.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存