在引导程序 4 中将页脚刷新到页面底部
[英] Flush footer to the bottom of the page in bootstrap 4
本文介绍了在引导程序 4 中将页脚刷新到页面底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用引导程序 4
我有这样的模板结构
<div id="内容"><nav id="content-header">...代码在这里...</nav><main id="content-main">...代码在这里...</main><div id="页脚">...代码在这里...
然而，页脚没有按预期齐平底部.(我不是在寻找粘性页脚).如何使用我使用的代码发送页脚.
几周前，我读了一篇文章，我们需要相应地使用 id="content" 和 content-header content-footer 来引导，以便完成这项工作.我丢失了文章链接，因此在这里发布了一个问题.
感谢任何帮助
解决方案
Bootstrap 没有任何 id 选择器，也没有 .content-header 或 .content-footer.<小时>
有几种方法可以实现它.我想给你看 3 个.
Flex - flex-grow-1
将 h-100 类用于 #content div 的所有父级，包括 html 和 body.
为#contentd-flex、flex-column和h-100类代码> div.
- 在
main 内容上使用 flex-grow-1.
您应该使用 boostrap 4.1 或更高版本，因为较低版本没有 flex-grow-1.
看到这支笔.我建议您添加和删除文本，以便您看到它有效.
https://codepen.io/anon/pen/bKEjLR
Flex - mt-auto
将 h-100 类用于 #content div 的所有父级，包括 html 和 body.
为#contentd-flex、flex-column和h-100类代码> div.
- 使用
mt-auto 作为 footer.
html,身体 {高度:100%}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="样式表"/><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">...代码在这里...</nav><main id="content-main" class="bg-primary p-5">...代码在这里...Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.Fugiat hic aspernatur quibusdam 别名 delectus odit officiis in, est sapiente deserunt harum aliquam at mollitia deleniti labourecorruptioni illum recusandae dolorum.Lorem ipsum dolor 坐 amet consectetur adipisicing 精英.Isteinvente voluptatum sint mollitia unde quisquam numquam vitae?身份证，奎亚.Cupiditate nam vero natus, facere nesciunt vel delectus hatnda eos sequi！Lorem ipsum dolor 坐 amet consectetur，adipisicing 精英.Non asperiores perferendis quae harum ab, dolorem dicta repudiandae quisquam repelendus Eveniet, totam voluptatum, eum cum nobis?Atque 别名 dolores nam illum.Lorem ipsum，dolor 坐 amet consectetur adipisicing 精英.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">...代码在这里...
min-height: calc(100vh - (页眉+页脚高度));
我们使用了这个，因为一些非常老的浏览器不支持 flex 框.检查浏览器对 flex 的支持.
- 求页脚和页眉的高度之和，假设为
120px - 设置
main的min-height为calc(100vh - 120px)；
main {最小高度:计算(100vh - 120px)；}
看到这支笔.https://codepen.io/anon/pen/bKExLm
访问这些页面以了解其他方法
https://css-tricks.com/couple-takes-sticky-页脚/
https://codepen.io/cbracco/pen/zekgx
I'm using bootstrap 4
I have my template structure like this
<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>
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.
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.
Any help is appreciated
解决方案
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.
Flex - flex-grow-1
Use the h-100 class for all the parents of the #content div including html and body.
Use d-flex, flex-column, and h-100 classes for the #content div.
- Use
flex-grow-1 on the main content.
You should use boostrap version 4.1 or higher because the lower version does not have 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
Flex - mt-auto
Use the h-100 class for all the parents of the #content div including html and body.
Use d-flex, flex-column, and h-100 classes for the #content div.
- Use
mt-auto for the 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>
min-height: calc(100vh - (header + footer height));
We have used this one, because some very old browsers does not support flex box. Check browser support for flex.
- Find the sum of height of footer and header, suppose it is
120px
- Set
min-height of main to calc(100vh - 120px);
main {
min-height: calc(100vh - 120px);
}
See this pen.
https://codepen.io/anon/pen/bKExLm
Visit these pages to learn the other methods
https://css-tricks.com/couple-takes-sticky-footer/
https://codepen.io/cbracco/pen/zekgx
这篇关于在引导程序 4 中将页脚刷新到页面底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
