在 bootstrap 4 中将页脚刷新到页面底部

2024-05-06

我正在使用引导程序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>

但是，页脚并未按预期齐平到底部。（我不是在寻找粘性页脚）。如何使用我使用的代码发送页脚。

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

任何帮助表示赞赏

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

有几种方法可以实现这一目标。我想向您展示其中的 3 个。

Flex-flex-grow-1

Use the h-100为所有家长上课#contentdiv 包括html and body.
Use d-flex, flex-column, and h-100课程为#content div.
Use flex-grow-1 on the main内容。

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

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

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

Flex - mt-汽车

Use the h-100为所有家长上课#contentdiv 包括html and body.
Use d-flex, flex-column, and h-100课程为#content div.
Use mt-auto为了footer.

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>

最小高度： calc(100vh - (页眉 + 页脚高度));

我们就用过这个，因为有些很老的浏览器不支持flex盒子。检查浏览器支持flex https://caniuse.com/#search=flex.

求页脚和页眉的高度之和，假设是120px
Set min-height of main to calc(100vh - 120px);

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

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

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

https://css-tricks.com/ Couple-takes-sticky-footer/ https://css-tricks.com/couple-takes-sticky-footer/

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap4