How to fix a footer overlapping content?

Asked 24/9, 2013 at 19:45 Answered 19/9, 2023 at 10:32

Solved html css css-position sticky-footer

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.

Douglasdouglashome answered 24/9, 2013 at 19:45 Comment(2)

position:fixed means fixed to the window, not to the container. You probably want position:absolute (and position:relative for the body). – Loanloanda 24/9, 2013 at 19:53

You may be interested in a sticky footer. ryanfait.com/html5-sticky-footer #2269869 – Izy 24/9, 2013 at 19:55

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

Gelhar answered 24/9, 2013 at 19:54 Comment(4)

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. – Douglasdouglashome 24/9, 2013 at 21:41

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 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? – Douglasdouglashome 24/9, 2013 at 22:9

@Douglasdouglashome 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? – Browband 7/11, 2014 at 22:24

@Douglasdouglashome 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: jsfiddle.net/zjfa812t – Unexacting 14/3, 2021 at 14:40

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>

Wilfredwilfreda answered 20/6, 2017 at 19:49 Comment(2)

it helped, but I had to put position:absolute and bottom:0 for footer as well. Thanks – Appear 6/5, 2021 at 7:53

I also needed to add to body height: 100vh to make sure it's tall enough that #container can have room to grow. Love this solution, thanks! – Lade 26/7 at 18:55

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%;
}

Watkin answered 9/10, 2013 at 9:0 Comment(0)

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.

Pottery answered 23/2, 2018 at 17:16 Comment(1)

Thank you! After searching for more than one hour, this is the only solution that worked for me. – Seclusion 20/9, 2021 at 12:27

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 :)

Lainelainey answered 12/5, 2017 at 12:19 Comment(1)

You should not repeat same lines of css again and again so media query only need sto specify changes that was not mentioned before. – Ostend 13/9, 2020 at 21:45

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: fixed;
    font-size: small;
    width:100%;
    z-index:9;
}

Constitution answered 19/9, 2023 at 10:32 Comment(1)

Add "z-index:9;" and then it will work – Constitution 19/9, 2023 at 10:33

-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%;
 }

Dasyure answered 21/10, 2016 at 6:2 Comment(1)

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' – Dasyure 21/10, 2016 at 6:4

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Solution

HTML

CSS

Example

Recommended topics

Hot tags