20

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.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html,body {
            padding: 0;
            margin: 0;
        }

        header {
            position:fixed;
            top:0;
            width:100%;
            height:40px;
            background-color:#333;
            padding:20px;
        }

        footer {
            background-color: #333;
            width: 100%;
            bottom: 0;
            position: relative;
        }
        #main{
            padding-top:100px;
            text-align:center;
        }
  </style>
</head>
<body>
    <header>
    header
    </header>

    <div id="main">
    main
    </div>

    <footer>
    footer
    </footer>
</body>
</html>
Joe
  • 7,749
  • 19
  • 60
  • 110
  • Here, I found a good example but adding a lot of unused css code. http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html – Joe Apr 20 '13 at 09:06
  • add display:inline-block to the footer it self, i use this in common case. – Hendra Nucleo Mar 25 '14 at 06:21

4 Answers4

29

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

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

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

10

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/

Victor
  • 5,043
  • 3
  • 41
  • 55
  • 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. – Martin Aug 06 '16 at 09:54
  • @Martin 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. – Victor Aug 08 '16 at 11:34
6

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

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}
Omar
  • 2,726
  • 2
  • 32
  • 65
  • 7
    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 – Martin Aug 06 '16 at 09:11
0

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

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177