Fixing sticky footer without overlapping body content

Question

I need help keeping my footer stuck to the bottom, but not overlap the upper elements either. I'm still fairly new/rusty to this since it took me 2 years to find a web job after college, so I haven't kept up as much as I should have.

Anyways, This is the format of the html I have. I want the "footer" to be stuck at the bottom so when they scroll up from the bottom it stays. But I also don't want it to be pushed up too high to make white space below it.

I've been trying to use a "position: absolute" style for the footer to keep it on the bottom. But I just read somewhere this bumps it out of the regular flow and that's what causes overlapping.

So how can I reformat my styles to allow the footer to stay below, but not overlap?

HTML:

<html>
<header></header>
<body>
    <div class="content">
        <div class="hd">Content of header</div>
        <div class="bd">Content of body</div>
        <div class="ft">Content of footer</div>
    </div>
</body>
</html>

CSS: (basic parts)

div {
    display: block;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.hd {
    position: static;
    flex: 0 0 auto;
}
.bd {
    position: relative;
    flex: 1 0 auto;
}
.ft {
    position: absolute;
    bottom: 0px;
    flex: 0 0 auto;
}

Possible duplicate of [Preventing fixed footer from overlapping content](https://stackoverflow.com/questions/2744690/preventing-fixed-footer-from-overlapping-content) — Scott Weaver, Apr 25 '18 at 20:35
Do you have to do this all by yourself or would it be possible to use a well working css framework such as bulma? — ZiggZagg, Apr 25 '18 at 20:42
@sweaver2112 I think I have read that post before, but I couldn't get it to work on my end for some reason. — DrChuckster007, Apr 25 '18 at 20:59
@ZiggZagg I haven't heard of bulma, what is it? And if I can get it to work on my own that would be ideal, so I can help show it off in a portfolio later on — DrChuckster007, Apr 25 '18 at 20:59
@DrChuckster007 https://bulma.io/documentation/overview/start/ and please use a modern editor such as brackets or visual studio code as well. — ZiggZagg, Apr 25 '18 at 21:09
@ZiggZagg what are those editors used for? I'm looking them up, but what's a short answer? — DrChuckster007, Apr 25 '18 at 21:15
these editors offer improved productivity for web developers by providing help, checking and auto completion. And bulma is a framework for frontend designers to help them build responsive (pc & phone, ...) websites faster. — ZiggZagg, Apr 25 '18 at 21:23
@sweaver2112 I followed that link a little better and changed some of my code to make it work. Thanks! — DrChuckster007, Apr 26 '18 at 18:56

score 1 · Answer 1 · answered Apr 25 '18 at 20:37

1

Just add a margin to the bottom of your body equal to your footer's height.

So if your footer has a height of say, 100px, then you need to add this to your css:

body {
    margin-bottom: 100px;
}

answered Apr 25 '18 at 20:37

AndrewL64

15,794
8
47
79

I already have the margin set to auto for my .body – DrChuckster007 Apr 25 '18 at 20:48
Yes but since your footer has position of `absolute`, the body assumes the footer div is out of the document flow which means you have to manually set a bottom margin to your body for the footer. This applies for elements that are using `fixed` or `absolute` positioning. – AndrewL64 Apr 25 '18 at 20:51
Are you talking about the body as a whole, or the class="body" div element? – DrChuckster007 Apr 25 '18 at 20:52
The body as a whole. Avoid naming a div class with default page elements like `body` or `html` to 1. avoid confusion and 2. maintain code semantics. – AndrewL64 Apr 25 '18 at 20:56
Okay I edited my original code box to show more exactly how I have it set up. these 3 div elements are all within the body tag. Should I change the div tag I have named "ft" into an actual footer tag instead, then try the margin-bottom edit you suggested? – DrChuckster007 Apr 25 '18 at 21:05

score 1 · Answer 2 · answered Apr 26 '18 at 18:54

I followed the instructions from the link that sweaver2112 suggested, and I had to remove a few duplicate elements and change others, and I finally got the footer to not overlap. Had to use flex to get it to work with the other div elements

.content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ft {
  flex: 0 0 50px;
  margin-top: auto;
}

Thank you all for the support!

Link for answer purposed that I used: LINK

score -1 · Answer 3 · answered Apr 25 '18 at 20:46

I think you might be looking for position: fixed; Ex:

.footer {
 position: fixed;
 bottom: 0;
}

This sticks the footer at the bottom of the window regardless of the content so when you scroll the footer will always stay at the bottom. This will however be above the content (overlap), so you need to also apply AndrewL's option to keep the content from going under the footer.

Fixing sticky footer without overlapping body content

3 Answers3