在引导程序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来进行引导,以使这项工作成功.我丢失了文章链接,因此在这里发布了一个问题.

任何帮助表示赞赏

Answer 1

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

柔性

1. 将该id类用于.content-headerdiv的所有父级,包括.content-footer和h-100.
2. div的使用#content, html和body类d-flex.
3. 使用flex-column的h-100内容.

您应该使用boostrap 4.1或更高版本,因为较低版本没有 #content

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

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

min-height:calc(100vh - (header + footer height));

我们使用过这个,因为有些旧浏览器不支持flex-grow-1框.

1. 找出页脚和页眉的高度之和,假设它是 main
2. 组flex-grow-1的 h-100对计算值(100vh - 120像素);

html,
body {
  height: 100%
}

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

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

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

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