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 for bootstrap才能使这项工作成功。我丢失了文章链接，因此在这里发布了一个问题。

感谢任何帮助

Answer 1

有几种方法可以实现它。我想告诉你两个。

的Flex

h-100 div的所有父母使用#content课程，包括html和body。
对d-flex div使用flex-column，h-100和#content类。
对flex-grow-1内容使用main。

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

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

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

min-height：calc（100vh - （标题+页脚高度））;

我们使用过这个，因为有些旧浏览器不支持flex框。

找出页脚和页眉的高度之和，假设它是120px
将min-height的{{1}}设置为calc（100vh - 120px）;

＆＃13;

main

＆＃13;

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

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

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

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

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

1 个答案:

的Flex

min-height：calc（100vh - （标题+页脚高度））;