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

概述我需要在我的页面上放一个粘性页脚,但是我的页脚没有确定的高度.在较小的屏幕上 – 行调整大小,页脚变长. 因此,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 – 粘性页脚 – 动态页脚高度所遇到的程序开发问题。

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