How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

Asked 12/4, 2013 at 16:16 Answered 8/12, 2023 at 21:9

Solved html css coding-style styles footer

When I use position relative with no content, footer goes up, with absolute with a lot of content, the footer goes down, and with fixed it is always there.

Is there a easy way to get at the end of the page independently of the content, shrinks and grows with content?

When there is a lot of content we can see the footer in the first page, and when there is few content we will see at the bottom.

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  background-color: #333;
  color: white;
  padding: 20px;
}

main {
  flex: 1; /* Grow to fill remaining vertical space */
  text-align: center;
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  padding: 20px;
  margin-top: auto; /* Push footer to the bottom */
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <header>
    header
    </header>

    <main>
    main
    </main>

    <footer>
    footer
    </footer>
</body>
</html>

Fryd answered 12/4, 2013 at 16:16 Comment(2)

Here, I found a good example but adding a lot of unused css code. twitter.github.io/bootstrap/examples/sticky-footer-navbar.html – Fryd 20/4, 2013 at 9:6

add display:inline-block to the footer it self, i use this in common case. – Califate 25/3, 2014 at 6:21

With Flexbox stick the footer at the bootom is easier than ever as we can see in the following snippet.

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Set minimum height to full viewport height */
    }

    main {
      flex: 1; /* Allow main content to grow and fill available space */
    }

    footer {
      background-color: #f0f0f0;
      padding: 10px;
      text-align: center;
    }

  <body>
   <main>
    <!-- Your main content goes here -->
    <p>Your content goes here.</p>
   </main>
  
   <footer>
    <!-- Your footer content goes here -->
    <p>&copy; 2023 Your Website Footer</p>
   </footer>
  </body>

Fryd answered 8/12, 2023 at 21:9 Comment(0)

For footer change from position: relative; to position:fixed;

 footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: fixed;
        }

Example: http://jsfiddle.net/a6RBm/

Courtneycourtrai answered 12/4, 2013 at 16:20 Comment(0)

Here is an example using css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    body content....
</div>
<footer class="footer">
    footer content....
</footer>

jsfiddle

Update
As @Martin pointed, the ´position: relative´ is not mandatory on the .footer element, the same for clear:both. These properties are only there as an example. So, the minimum css necessary to stick the footer on the bottom should be:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}

Also, there is an excellent article at css-tricks showing different ways to do this: https://css-tricks.com/couple-takes-sticky-footer/

Exegete answered 25/9, 2015 at 11:54 Comment(2)

Are you sure that position: relative is needed on the footer element? Your solution works great, because of the specified heights. But I think position: relative on the footer is not needed. It would only be needed, if the footer element had some sub-element beneath it with position: absolute, and you wanted to place this sub-element relative to the footer. – Croat 6/8, 2016 at 9:54

@Croat the ´position: relative´ is not mandatory, the same for clear: both and the padding on the #wrap element. I put these properties only as an example of a minimun structure for a HTML page. Thanks for the note, I'll update the answer. – Exegete 8/8, 2016 at 11:34

I would use this in HTML 5... Just sayin

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

Hynes answered 5/3, 2014 at 20:16 Comment(1)

absolute positioning takes an element (here: the footer) out of the document flow, so if you have much content vertically, the footer will be placed above this content – Croat 6/8, 2016 at 9:11

just set position: fixed to the footer element (instead of relative)

Jsbin example

Note that you may need to also set a margin-bottom to the main element at least equal to the height of the footer element (e.g. margin-bottom: 1.5em;) otherwise, in some circustances, the bottom area of the main content could be partially overlapped by your footer

Cubital answered 12/4, 2013 at 16:19 Comment(1)

But with a lot of content, it is still there jsfiddle.net/84LxZ – Fryd 14/4, 2013 at 17:48

With Flexbox stick the footer at the bootom is easier than ever as we can see in the following snippet.

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh; /* Set minimum height to full viewport height */
    }

    main {
      flex: 1; /* Allow main content to grow and fill available space */
    }

    footer {
      background-color: #f0f0f0;
      padding: 10px;
      text-align: center;
    }

  <body>
   <main>
    <!-- Your main content goes here -->
    <p>Your content goes here.</p>
   </main>
  
   <footer>
    <!-- Your footer content goes here -->
    <p>&copy; 2023 Your Website Footer</p>
   </footer>
  </body>

Fryd answered 8/12, 2023 at 21:9 Comment(0)

Recommended topics

Hot tags