Bootstrap 4 - 粘性页脚 - 动态页脚高度 [英] Bootstrap 4 - Sticky footer - Dynamic footer height

问题描述

我需要在我的页面上放置一个粘性页脚，但是我没有为页脚设置一个确定的高度。在较小的屏幕上 - 行的大小调整和页脚变长。

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

任何方式来实现这一点？

  / *粘滞的页脚样式
 ---------- ---------------------------------------- * / 
 html {
位置：相对; 
最低身高：100％; 
} 
 body {
 / *边距底部高度* / 
 margin-bottom：60px; 
} 
 .footer {
 position：absolute; 
 bottom：0; 
宽度：100％; 
 / *设置页脚的固定高度* / 
 height：60px; 
 line-height：60px; / *垂直居中文本* / 
背景颜色：＃f5f5f5; 
} 
 
 
 / *自定义页面CSS 
 ------------------------ -------------------------- * / 
 / *模板或粘滞页脚方法不需要。 * / 
 
 body> .container {
 padding：60px 15px 0; 
} 
 
 .footer> .container {
 padding-right：15px; 
 padding-left：15px; 
} 
 
代码{
 font-size：80％; 
 
  

解决方案

现在Bootstrap 4是flexbox ，粘性页脚可以使用...

 < wrapper class =d-flex flex-column> 
< nav> 
< / nav> 
< main class =flex-fill> 
< / main> 
< footer> 
< / footer> 
< / wrapper> 
 
 body，wrapper {
 min-height：100vh; 
} 
 
 .flex-fill {
 flex：1 1 auto; 
} 
  

演示： Bootstrap 4 Sticky Footer （4.0.0）

$ b 注意： flex-fill 实用程序类将包含在中下一个Bootstrap 4.1 发布。所以在发布之后，不需要额外的flex-fill CSS。

I need to put a sticky footer on my pages , however i don't have a definite height set for my footer . On smaller screens - the rows resize and footer becomes longer .

Therefore , the default sticky footer example provided on getbootstrap does not work since it requires a fixed footer height.

Any way to implement this ?

/* 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%;
}

解决方案

Now that Bootstrap 4 is flexbox, a sticky footer can be done using...

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

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

.flex-fill {
   flex:1 1 auto;
}

Demo: Bootstrap 4 Sticky Footer (4.0.0)

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.

这篇关于Bootstrap 4 - 粘性页脚 - 动态页脚高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！