How to fix a footer overlapping content?

Question

I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.

This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.

Below is my code, and a JSFiddle that I made with all the relevant parts of a page.

html, body {
    margin: 0;
    padding: 0;
}
html, body {
    background: #252525;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}
body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}
#container {
    color: white;
    margin-bottom: 2em;
    min-height: 100%;
    overflow: auto;
    padding: 0 2em;
    text-align: justify;
}
#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: fixed;
    font-size: small;
    width:100%;
}

<body>
    <div id="container">
         <h1>A webpage</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.
            <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div>
    <div id="footer">This is a footer.</div>
</body>

Here is a JSFiddle example.

`position:fixed` means fixed to the _window_, not to the container. You probably want `position:absolute` (and `position:relative` for the body). — Mr Lister, Sep 24 '13 at 19:53
You may be interested in a sticky footer. http://ryanfait.com/html5-sticky-footer/ http://stackoverflow.com/questions/2269369/why-not-used-positionfixed-for-a-sticky-footer — kunalbhat, Sep 24 '13 at 19:55

score 31 · Accepted Answer · edited Oct 22 '16 at 07:40

31

Change this:

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Demo

edited Oct 22 '16 at 07:40

Nisse Engström

4,738
23
27
42

answered Sep 24 '13 at 19:54

Sagar Guhe

1,041
1
11
35

This definitely helped prevent the content and footer from overlapping, but there's still the problem with the "shortening" of the container div when the browser window is made smaller and then you scroll to the end. This is visible even in the demo you linked, sadly. – Flawedspirit Sep 24 '13 at 21:41
2

Okay, I've done it. Buried in some long forgotten (until now) backup, I dug up the source code of a previous version of my website that I knew worked the way I wanted. The implementation is at http://jsfiddle.net/zgMYu/12/ for future reference. It means I have to nest my actual page content into yet another layer down "the content class" but if it works, it works, right? – Flawedspirit Sep 24 '13 at 22:09
1

@Flawedspirit what if footer position was fixed and the same issue persisted. In the sense that the paragraph would overlapped a footer (fixed position).Have a solution for this? – Green Nov 07 '14 at 22:24
@Flawedspirit It works only because of the min-height and overflow properties (not because of the position and divs) as you can see in an example here: http://jsfiddle.net/zjfa812t/ – Jerry Mar 14 '21 at 14:40

Scott Weaver · Answer 2 · 2019-05-03T17:24:03.047

Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.

Essentially, all you have to do is set <body> to:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).

Here is an example snippet of the above:

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #252525;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  color: white;
  background: #363636;
  padding: 2em;
  background: #363636;
  flex: 1 1 auto;
  /*grow vertically*/
  width: 55%;
  text-align: center;
}

#footer {
  color: #707070;
  height: 2em;
  font-size: small;
}

<body>
  <div id="container">
    <h1>A webpage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
      nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
    <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
      libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
  </div>
  <div id="footer">This is a footer.</div>
</body>

it helped, but I had to put `position:absolute` and `bottom:0` for footer as well. Thanks — Wahab Shah, May 06 '21 at 07:53

score 8 · Answer 3 · edited Oct 22 '16 at 07:42

8

See DEMO

I have made some CSS changes. Have a look. I hope it will help you.

Updated CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}

edited Oct 22 '16 at 07:42

Nisse Engström

4,738
23
27
42

answered Oct 09 '13 at 09:00

NikeshPathania

217
2
5

Sylhare · Answer 4 · 2021-07-05T14:18:57.920

I believe you were looking for a sticky footer that stays while not being fixed to the bottom of the page (so no overlap).

Solution

The solution comes from Chris Bracco and I am going to detail what you need to reproduce the effect:

HTML

Your HTML be like:

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

You will need to add in your css something like:

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

Example

That's like the basic you need to create the sticky footer. Here is an example (with some more CSS for better rendering).

html {
      height: 100%;
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    .body-for-sticky {
      position: relative;
      min-height: 100%;
      padding-bottom: 6rem;
    }
    
    .sticky-footer {
      position: absolute;
      bottom: 0;
    }
    
/* for the rendering */

    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    .footer {
      right: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    
    .demo {
      margin: 0 auto;
      padding-top: 64px;
      max-width: 640px;
      width: 94%;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sticky footer</title>
    <style>  </style>
</head>

<body class="body-for-sticky">

  <div class="demo">
    <h1 style="margin-top: 0">CSS “Always on the bottom” Footer</h1>

    <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

    <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

    <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

    <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>

    <p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
  </div>

  <div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

</body>

</html>

Expand the snippet and watch the result full size to see how it works.

Thank you! After searching for more than one hour, this is the only solution that worked for me. — Murad Alm., Sep 20 '21 at 12:27

score 1 · Answer 5 · edited Jul 29 '20 at 13:40

1

First write this code

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;
}

and now set media queries

@media only screen and (max-width: 767px){
    footer {
      background-color: #000;
      color: #FFFFFF;
      font-size:.8em;
      margin-top:25px;
      padding-top: 15px;
      padding-bottom: 10px;
      position:static;
      left:0;
      bottom:0;
      width:100%;
    }
}

hope this will help you :)

edited Jul 29 '20 at 13:40

Khasan 24-7

456
2
5
19

answered May 12 '17 at 12:19

Amol Impal

11
2

You should not repeat same lines of css again and again so media query only need sto specify changes that was not mentioned before. – surendrapanday Sep 13 '20 at 21:45

score -1 · Answer 6 · edited Oct 22 '16 at 07:37

-1

 #footer {
     z-index: 1;
     position: absolute;
     right: 0;
     bottom: 0;
     left: -25%;
     padding: 1rem;
     background-color: black;
     text-align: center;
     height: 3em;
     left: 0;
     font-size: small;
     width:100%;
 }

edited Oct 22 '16 at 07:37

Nisse Engström

4,738
23
27
42

answered Oct 21 '16 at 06:02

Reza Rouf

11
3

i know i am late. check this code out. if you use bootstrap change the '#footer' to the class you wrap around the footer like '.footer1' – Reza Rouf Oct 21 '16 at 06:04

How to fix a footer overlapping content?

6 Answers6

Solution

HTML

CSS

Example