Problems with CSS sticky footer

Question

I am trying to implement a CSS sticky footer.

The issue is there is a content DIV that is extending beyond its container causing scroll bars that are not desirable and the background-image hung off the page div does not extend the full height of the document.

Here is my HTML:

    
          
            
                Header links -
                link 1
                link 2
                link 3
            
          
        
            link to popup
              
        
            
                Footer links -
                link 1
                link 2
                link 3

And here is the CSS:

/*--------------------------------------------------------------- global */

html, 
body {
    color:#969696;
    font-size:100%;
    height:100%;
}

body {
    font:normal 200 70% Arial, Helvetica, Verdana, sans-serif;  
}

a, 
a:link, 
a:visited, 
a:hover, 
a:active {
    border-bottom:1px dashed #ff8400;
    color:#ff8400;
    text-decoration:none;}

a:hover {
    border-bottom-style:solid;}

/*--------------------------------------------------------------- layout */

#page {
    background:url("../images/bgMain.jpg") repeat-y center top;     
    height:100%;
    margin:0 auto;
    position:relative;
    width:1024px;
}

dl, 
dt, 
dd {
    float:left;
} 


dd {
    margin:0 .2em 0;
}

dd:after {
    color:#969696;
    content:"|";
    padding:0 0 0 .3em;
}

dd:last-child:after {
    content:"";
}

/*----------------- header */

#header {
    margin:0 auto;
    width:726px;
}

#header dl {
    float:right;
    line-height:60px;
}

/*----------------- content body */

#content {
    background:#fff;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
        -moz-border-radius-topleft:5px;
        -moz-border-radius-topright:5px;
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
    box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);    
        -moz-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
        -webkit-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
    clear:both;
    height:100%;
    margin:0 auto;  
    min-height:100%;
    padding:16px 13px 22px;
    position:relative;
    width:700px;
}

/*----------------- footer */

#footer {
    clear:both;
    margin:-22px auto;
    position:relative;
    width:726px;
}

#footer dl {
    display:inline; 
    margin:0 0 0 13px;
}

#footer a, 
#footer a:link, 
#footer a:visited, 
#footer a:hover, 
#footer a:active {
    border-bottom-color:#969696;
    color:#969696;
}

user_759144 · Answer

I wrote a very clean CSS footer a couple days ago, you could find it useful.

http://mystrd.at/modern-clean-css-sticky-footer

user_7039399 · Answer

There is a very helpful CSS trick that will always stick your footer to the bottom, even if the content height is lower than the height of the viewport.

See HTML code below:



 
  Sticky Footer
 
 
   
  © 2016

See CSS code below:

body {
 margin: 0; /* If not already reset */
}

.content {
 min-height: calc(100vh - 20px);
}

footer {
 height: 20px;
}

In your case I would wrap the nav and article in a "content" div. And give it a min-height value of calc(100vh - 100px).

Here is the article source: Sticky CSS Footer

user_11051881 · Answer

Use FlexBox

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

with this I resolved all the problem with the footer with a not full content page.

user_15592900 · Answer

Easy as all in this world!, you only need to stick to the bottom...

Use this next code:

//This is jus't a stupid detail
//So, don't take much importance!

const text = document.getElementById('footer');

text.onmouseover = function(){
  text.style.color = "red";
}

text.onmouseleave = function(){
  text.style.color = "white";
}

while (e = true){
  text.innerText = "Hello!";
  setTimeout(function(){
   text.innerText = "I love coding";
   setTimeout(function(){
    text.innerText = "Codede by INovomiast";
   }, 1500);
  },1500);
}

footer{
  background-color: rgb(0,0,0,0.5);
  width: 100%;
  color: white;
  bottom: 0;
  position: absolute;
}


  
    PAGE CONTENT
    
      
        FOOTER!

Problems with CSS sticky footer

12 Answers