在引导程序4中将页脚刷新到页面底部 [英] Flush footer to the bottom of the page in bootstrap 4

问题描述

我正在使用引导程序4

I'm using bootstrap 4

我有这样的模板结构

<div id="app">
  <div id="content">
    <nav id="content-header">
    ...code here...
    </nav>
    <main id="content-main">
    ...code here...
    </main>
    <div id="footer">
    ...code here...
    </div>
  </div>
</div>

但是，页脚未按预期冲至底部. (我不是在寻找页脚的粘性).如何使用代码im发送脚注.

However the footer does not flush to the bottom as expected. (I'm not looking for a sticky footer). How to send the footer down with the code im using.

几周前，我读了一篇文章，我们需要相应地使用id ="content"和content-header content-footer进行引导，以完成这项工作.我丢失了文章链接，因此在这里发布了一个问题.

Few weeks ago i read an articles that we need to use id="content" and content-header content-footer accordingly for bootstrap in order to make this work. I've lost the article link, hence posting a question here.

感谢您的帮助

推荐答案

Bootstrap没有任何id选择器，.content-header或.content-footer.

---

有两种方法可以实现它.我想给你看3个.

Bootstrap has neither any id selector nor .content-header or .content-footer.

---

There are a couple of ways that you can achieve it. I want to show you 3 of them.

1. 将h-100类用于#content div的所有父级，包括html和body.

1. Use the h-100 class for all the parents of the #content div including html and body.

将d-flex，flex-column和h-100类用于#content div.

Use d-flex, flex-column, and h-100 classes for the #content div.

您应该使用boostrap 4.1或更高版本，因为较低的版本没有flex-grow-1 .

看这支笔.我建议您添加和删除文本，以便您可以看到它的工作原理.

See this pen. I recommend you to add and remove texts so that you see that it works.

https://codepen.io/anon/pen/bKEjLR

1. 将h-100类用于#content div的所有父级，包括html和body.

1. Use the h-100 class for all the parents of the #content div including html and body.

将d-flex，flex-column和h-100类用于#content div.

Use d-flex, flex-column, and h-100 classes for the #content div.

html,
body {
  height: 100%
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div id="app" class="h-100">
  <div id="content" class="d-flex flex-column h-100">
    <nav id="content-header" class="bg-info p-5">
    ...code here...
    </nav>
    <main id="content-main" class="bg-primary p-5">
    ...code here...
      
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat hic aspernatur quibusdam alias delectus odit officiis in, est sapiente deserunt harum aliquam at mollitia deleniti labore corrupti illum recusandae dolorum.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste inventore voluptatum sint mollitia unde quisquam numquam vitae? Id, quia. Cupiditate nam vero natus, facere nesciunt vel delectus assumenda eos sequi!
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non asperiores perferendis quae harum ab, dolorem dicta repudiandae quisquam repellendus eveniet, totam voluptatum, eum cum nobis? Atque alias dolores nam illum.
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi odit aspernatur minima tempora! Similique consequatur distinctio odit nemo, pariatur consectetur ad ipsum provident corporis nostrum culpa cumque doloremque quo quia.
    </main>
    <div id="footer" class="bg-danger p-5 mt-auto">
    ...code here...
    </div>
  </div>
</div>

我们之所以使用这一功能，是因为某些非常老的浏览器不支持flex框.检查浏览器是否支持 flex .

We have used this one, because some very old browsers does not support flex box. Check browser support for flex.

1. 找到页脚和页眉的高度之和，假设为120px
2. 将main的min-height设置为calc(100vh - 120px);

1. Find the sum of height of footer and header, suppose it is 120px
2. Set min-height of main to calc(100vh - 120px);

main {
  min-height: calc(100vh - 120px);
}

看这支笔. https://codepen.io/anon/pen/bKExLm

访问这些页面以了解其他方法

Visit these pages to learn the other methods

https://css-tricks.com/couple-takes-sticky-页脚/

https://codepen.io/cbracco/pen/zekgx

这篇关于在引导程序4中将页脚刷新到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！