Menu
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.
<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
.fixed-bottom but like I said, I don't want the footer to stay when I scroll.
242
asked Aug 31 '25 17:08
You can use pure CSS, like this:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #333;
color:#fff;
}
I think you may benefit from Flexbox, unless I'm misunderstanding what you're going for. Either way I believe Flexbox is the answer, just let me know if this works for you or we can explore a bit deeper.
Here is the 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?
flex-direction to column to flow vertically like our traditional doc flow.flex-grow value of 1 to fill all unoccupied space.footer a flex-basis of auto, but also making it a flex container to make our links align horizontally effortlessly with space to work with.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
