CSS - Sticky footer

Question

There seem to be tons of solved problems with this one, but neither of them seem to work for me...

I have created this little jsfiddle to show you: jsfiddle footer

And the CSS:

.footer {
     width:798px;
     border-top: 2px solid #2E181A;
     clear: both;
     padding: 5px 0 0 0;
     background-color: inherit;
     text-align: center;
     bottom:0;
     background-color: #E6D9BD;
     position:relative;
     height: 30px;
     margin: -30px auto 2px auto;
     z-index:30;
 }

 .container {
     width: 788px;
     margin: 0px auto 0px auto;
     padding: 0px 0px 30px 0px;
     border:5px solid #2E181A;
     background-color: #E6D9BD;
     min-height: 100%;
     position:relative;
     content: " "; /* 1 */
     display: table; /* 2 */
 }

 .contentleft {
     background-color: inherit;
     margin:5px 10px 10px 10px;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 300px;
     display:block;
 }

 .contentright {
     background-color: inherit;
     margin:5px 0px 10px 10px;
     border:0px solid #2E181A;
     padding:10px 5px 30px 5px;
     float:left;
     overflow: hidden;
     width: 420px;
     display:block;
 }

I have set a top-border in the div.footer, and this should be visible and a little space between the border and the div.container.

Hope you will take a quick look at the code and see whatever I'm doing wrong!

Wouldn't a sticky footer, by definition, adhere to the page during a user's scroll? Assuming this is true then why do you have the `position` of `.footer` relative instead of fixed? — djthoms, Feb 16 '14 at 00:26
Uhmm...I might have understanded the definition of "sticky" wrong. What i mean is a footer, that stays at the bottom no matter how long the content is. My footer does so, but not as i want it to... — Simon Jensen, Feb 16 '14 at 00:28
@Nit, thx for the link, but it was this toturial i followed long ago, but somehow messed up my css and now i have totally lost the big picture of this... — Simon Jensen, Feb 16 '14 at 00:32

score 4 · Answer 1 · answered Jun 17 '14 at 04:21

Modern Clean CSS “Sticky Footer” from James Dean

HTML

<!DOCTYPE html>
<head>
    <title></title>
</head>
<body>
    <nav></nav>
    <article>Lorem ipsum...</article>
    <footer></footer>
</body>
</html>

CSS

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

Demo here

score 3 · Answer 2 · answered Feb 16 '14 at 00:38

3

I'm not sure if this is what you wanted? http://jsfiddle.net/2jn3J/19/

I added a container for the footer div with a height of 50px which is fixed to the bottom. The footer div is now absolutely positioned at the bottom with the div with a height of 30px, thus leaving a 20px gap.

.footer-container {
    background-color:white;
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    z-index:30;
    clear: both;
}

.footer {
    border-top: 2px solid #2E181A;
    background-color: inherit;
    text-align: center;
    background-color: #E6D9BD;
    height:30px;
    position:absolute;
    bottom:0;
    width:100%;
}

.container
{
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    background-color: #E6D9BD;
    height:2000px;
    position:relative;
        content: " "; /* 1 */
    display: table; /* 2 */
}
.contentleft
{

    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 300px;
        display:block;
}
.contentright
{

    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

answered Feb 16 '14 at 00:38

Jordan

237
7
21

I thought a sticky footer was a footer that was always below the other content? Not a fixed footer, that is always at the bottom of the viewport. Am I wrong? – Marcel Feb 16 '14 at 00:47
1

A sticky footer is when the footer is "stuck" to the bottom of the screen – Jordan Feb 16 '14 at 00:51
On line 13 of YOUR fiddle change it to this "margin: 30px auto 2px auto;" Then 30px margin appears at the top – Jordan Feb 16 '14 at 00:52
1

http://stackoverflow.com/questions/2269369/why-not-used-positionfixed-for-a-sticky-footer - "The meaning of a sticky footer is to stay sticked to the bottom, except if the content is longer than the viewport height." Guessing definitions vary – Marcel Feb 16 '14 at 01:05
Ah yeah sorry for the confusion mate – Jordan Feb 16 '14 at 01:11
@user3266433! You nailed it! That little minus were the fault! Now it seems to work :) Thx a lot!! – Simon Jensen Feb 16 '14 at 01:17
1

The most common usage of _sticky footer_ seems to be a footer that sticks to the bottom of the page when the content is shallow and acts as a normal bottom footer otherwise. – Etheryte Feb 16 '14 at 01:44

score 2 · Answer 3 · answered Nov 11 '17 at 00:35

With Flexbox, life is way easier.

.FlexContainer {
  display: flex;
  flex-direction: column;
}

.Main-Content {
  flex: 1; 
  // This ensures, all extra space is stretched by this class. Remaining will stretch to own height
}

/* Only to distinguish. No need to give body height  */

header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}

body {
height: 300px;
}

<body class="FlexContainer">
  <header>HEADER</header>
  <main class="Main-Content">
    This is main section
  </main>
  <footer>FOOOOTERRR</footer>
</body>

Marcel · Answer 4 · 2014-02-16T01:26:16.080

You actually are close to getting the concept from http://www.cssstickyfooter.com/html-code.html working, it just needs a html, body { height: 100%; } to become "sticky".

http://jsfiddle.net/2jn3J/22/

If you want to do it right completely and get the space between the content and the footer, you're gonna have to add another div with a min-height: 100%; and remove the min-height: 100%; from .container.

http://jsfiddle.net/2jn3J/28/

CSS:

html, body { height: 100%; }
.wrap { min-height: 100%; }
.footer {
    width:798px;
    border-top: 2px solid #2E181A;
    clear: both;
    padding: 5px 0 0 0;
    background-color: inherit;
    text-align: center;
    bottom:0;
    background-color: #E6D9BD;
    position:relative;
    height: 30px;
    margin: -37px auto 0 auto;
    z-index:30;
}

.container {
    width: 788px;
    margin: 0px auto 0px auto;
    padding: 0px 0px 30px 0px;
    border:5px solid #2E181A;
    background-color: #E6D9BD;
    position:relative;
    content: " "; /* 1 */
    display: table; /* 2 */
    overflow: auto;
}

.contentleft {
    background-color: inherit;
    margin:5px 10px 10px 10px;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: auto;
    width: 300px;
    display:block;
}
.contentright {
    background-color: inherit;
    margin:5px 0px 10px 10px;
    border:0px solid #2E181A;
    padding:10px 5px 30px 5px;
    float:left;
    overflow: hidden;
    width: 420px;
    display:block;
}

HTML:

<div class="wrap">
<div class="container">

<div class="contentleft">Content in the left</div>
<div class="contentright">Content in the right</div>

</div>
</div>

<div class="footer">Sticky footer</div>

Thx for your answer @Marcel, but that didn't make it. I believe that it makes no difference if the min-height:100% is in the wrapper or the container, BUT, changing this "margin: -30px auto 2px auto;" to this "margin: 30px auto 2px auto;" made it! :) Thx a lot for your answer, but this minus was the bug. — Simon Jensen, Feb 16 '14 at 01:18

score 0 · Answer 5 · edited May 30 '16 at 10:31

This is table simulation with css. Header and footer are 100px height and the container div take all the space of your screen between

CSS:

#frame{
   display: table;
   height: 100%
   width: 100%;
}

#header{
   display: table-row;
   height: 100px;
   background-color: red;
}

#container{
   display: table-row;
}

#footer{
   display: table-row;
   height: 100px;
   background-color: black;
}

HTML:

<div id="frame">
    <div id="header"></div>
    <div id="container"></div>
    <div id="footer"></div>
</div>

JSFiddle (I added some extra styles to the body because fiddle is in iframe, but in usual browser behaivor you won't need that).

score 0 · Answer 6 · answered Nov 13 '18 at 22:42

I just wrote an article about this. You can find it on medium.

There are tons of CSS valid solutions, but I recommend using Javascript to achieve this result.

The main idea behind this is that you want to know what the height above the footer is and what how much you need to adjust the footer's top in order to move it to the bottom. Here's a Gist that does exactly that.

Here's code that does it (assuming you footer is the order with id #footer):

window.addEventListener("load", activateStickyFooter);

function activateStickyFooter() {
  adjustFooterCssTopToSticky(); 
  window.addEventListener("resize", adjustFooterCssTopToSticky);
}

function adjustFooterCssTopToSticky() {
  const footer = document.querySelector("#footer");
  const bounding_box = footer.getBoundingClientRect();
  const footer_height = bounding_box.height;
  const window_height = window.innerHeight;
  const above_footer_height = bounding_box.top - getCssTopAttribute(footer);
  if (above_footer_height + footer_height <= window_height) {
    const new_footer_top = window_height - (above_footer_height + footer_height);
    footer.style.top = new_footer_top + "px";
  } else if (above_footer_height + footer_height > window_height) {
    footer.style.top = null;
  }
}

function getCssTopAttribute(htmlElement) {
  const top_string = htmlElement.style.top;
  if (top_string === null || top_string.length === 0) {
    return 0;
  }
  const extracted_top_pixels = top_string.substring(0, top_string.length - 2);
  return parseFloat(extracted_top_pixels);
}

If you want a more detailed answer, head over to the medium article. I also wrote a JS Fiddle for this.

CSS - Sticky footer

6 Answers6

Linked

Related