如何使页脚停留在页面引导的底部4
[英]How to make footer stay on the bottom of the page bootstrap 4
问题描述
This question may be a repeat! 
这个问题可能会重复！ I'd like my footer to be at the bottom of the page, but not fixed there when I scroll. 我希望页脚位于页面底部，但在滚动时不固定在那里。 I'd like it to be like the footer on the bottom of this page Footer Example . 我希望它像此页脚示例中的页脚一样 。 This is my footer code so far, I've been using bootstrap 4 but I can't find a class to help me with what I want. 到目前为止，这是我的页脚代码，我一直在使用bootstrap 4，但是找不到适合我的类。
<footer>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitch"></i></a>
</footer>
I'm well aware of the bootstrap class 我很清楚bootstrap类
.fixed-bottom but like I said, I don't want the footer to stay when I scroll. .fixed-bottom但是就像我说的那样，我不想在滚动时保留页脚。
2 个解决方案
解决方案1
1 已采纳 2018-07-03 18:44:34
You can use pure CSS, like this: 您可以使用纯CSS，如下所示：
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color:#fff;
}
解决方案2
1 2018-07-07 10:00:24
I think you may benefit from Flexbox, unless I'm misunderstanding what you're going for. 我认为您可能会从Flexbox中受益，除非我误解了您要做什么。 Either way I believe Flexbox is the answer, just let me know if this works for you or we can explore a bit deeper. 无论哪种方式，我都相信Flexbox是答案，请让我知道这是否适合您，或者我们可以进行更深入的探索。
Here is the CodePen: https://codepen.io/codespent/pen/eKqzjX 这是CodePen： https ：//codepen.io/codespent/pen/eKqzjX
body { display: flex; height: 100%; flex-direction: column; } .main { flex: 1 0 auto; border: 1px solid #000; } .wrapper { display: flex; justify-content: center; } footer { flex: 0 0 auto; display: flex; color: #ccc; margin: 1em; padding: 1em; width: 80%; border-top: 1px solid blue; justify-content: center; } footer i { padding: 1em; }
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <body> <div class="main"> <h1>Hello Flex</h1> <p>This is Flexbox</p> <h1>Hello Flex</h1> <p>This is Flexbox</p> </div> </body> <div class="wrapper"> <footer> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-google-plus"></i></a> <a href="#"><i class="fa fa-twitch"></i></a> </footer> </div>
So what's important here? 那么，这里重要的是什么？
- We're making the body of our document a Flexbox container to allow our inner elements to be flex items. 我们正在将文档主体设置为Flexbox容器，以允许我们的内部元素成为flex项目。
- We're setting our
flex-directiontocolumnto flow vertically like our traditional doc flow.我们正在将flex-direction设置为column以像传统的文档流程一样垂直流动。 - We're giving our main container a
flex-growvalue of 1 to fill all unoccupied space.我们将主容器的flex-grow值设置为1，以填充所有未占用的空间。 - We're giving our
footera flex-basis of auto, but also making it a flex container to make our links align horizontally effortlessly with space to work with.我们为footer提供了自动伸缩功能，同时也使它成为了伸缩容器，使链接可以轻松地水平对齐以与工作空间对齐。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.