在引导程序4中将页脚刷新到页面底部

Question

我正在使用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向下发送页脚。

几周前我读了一篇文章，我们需要使用id =“content”和content-header content-footer相应的bootstrap，以使这项工作。我丢失了文章链接，因此在这里发布了一个问题。

任何帮助表示赞赏

Answer 1

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

---

有几种方法可以实现它。我想告诉你其中的3个。

Flex - flex-grow-1

1. 使用h-100类为#content div的所有父母，包括html和body。
2. 使用d-flex，flex-column和h-100类为#content div。
3. 在flex-grow-1内容中使用main。

您应该使用bootstrap 4.1或更高版本，因为较低版本没有qazxsw poi。

看到这支笔。我建议您添加和删除文本，以便您看到它有效。

flex-grow-1

Flex - mt-auto

1. 使用https://codepen.io/anon/pen/bKEjLR类为h-100 div的所有父母，包括#content和html。
2. 使用body，d-flex和flex-column类为h-100 div。
3. 使用#content作为mt-auto。

footer

html,
body {
  height: 100%
}

min-height：calc（100vh - （header + footer height））;

我们使用过这个，因为一些非常古老的浏览器不支持

<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的支持。

1. 找到页脚和标题的高度之和，假设它是flex
2. 将120px的min-height设置为calc（100vh - 120px）;

main

看到这支笔。

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

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

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

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