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.

<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.

Nate Sedler
  • 103
  • 1
  • 2
  • 7

3 Answers3

10

You can use pure CSS, like this:

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color:#fff;
}
Jake
  • 1,086
  • 12
  • 38
Abdi
  • 589
  • 5
  • 16
  • @NateSedler just be careful with absolute positioning if you don't want media query hell, but if you keep it simple like this you should have no issues! – CodeSpent Jul 07 '18 at 19:57
  • 1
    @CodeSpent I will! Thanks for the help, you are awesome! – Nate Sedler Jul 08 '18 at 01:57
  • Can confirm that it will work when using columns in your footer too. You can also use the built-in `container-fluid` class instead of `width: 100%`. – Jake Apr 03 '19 at 00:57
3

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?

  • We're making the body of our document a Flexbox container to allow our inner elements to be flex items.
  • We're setting our flex-direction to column to flow vertically like our traditional doc flow.
  • We're giving our main container a flex-grow value of 1 to fill all unoccupied space.
  • We're giving our 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.
CodeSpent
  • 1,684
  • 4
  • 23
  • 46
0

please refer to my answer here : footer stays at bottom - stackoverflow It is simple and will solve your issue, even if you are not using bootstrap

Omair Munir
  • 135
  • 8