CODEWITHSUNDEEP
htmlcssfootersticky
Simon H
Simon H

Reputation: 374

Why doesn't sticky footer work?

I have tried several things but my sticky header does not work. I've been trying several tutorials I found, but none worked. I have also looked at different post on stackoverflow but none described my problem. Here's my HTML:

<div id='container'>
    <div id='header>blabla</div>
    <div id='actualpage'>bblablabal</div>
    <div id='footer'>blablafooterblabla</div>
</div>

And here's the css:

html, body {
padding: 0;
margin: 0;
height: 100%;
}
#container{
background-color:white;
width:100%;
min-height: 100%;
height:100%;
}
#actualpage{
width:750px; 
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-20px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
bottom:0;
}

Thank you for your help!

Upvotes: 1

Views: 784

Answers (5)

Astrotim
Astrotim

Reputation: 2172

tl;dr

See working CodePen: http://cdpn.io/KwzuA

or use Flexbox - see demo: http://codepen.io/astrotim/pen/PwYQOJ/right/?editors=010

Explanation

Using position for a sticky footer is typically not a good idea, as it removes the element from the document flow and can have undesired results of the footer overlapping the content when scrolling.

A tried and trusted method is to add a "push" div inside the wrapper div and then have the footer div below, outside the wrapper. Like this:

<div id="wrapper">

  <header>
    <h1>Header</h1>
  </header>

  <div id="body">
    <p>Lorem ipsum...</p>
  </div><!--#body-->

  <div class="push"></div>

</div><!--#wrapper-->

<footer>
  <p>Footer</p>
</footer>

For the CSS, you will need to set html, body and #wrapper with height: 100%. You then set a fixed height to your footer and apply the same height to #push. Then you offset the body with a negative margin-bottom. The #wrapper needs a few other properties, like so:

html, body {
  height: 100%;
}
body {
  overflow-y: scroll;
}
#wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -160px;  
}
.push, footer {
  height: 160px;
}
footer {
  /* remember the box model: padding+height  */
  padding-top: 15px;
  height: 145px;
}

The footer will now flow properly when the content of the page extends below the fold, and will be sticky when the content does not.

** Use Flexbox **

The modern approach to this is using Flexbox. See: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

I used the Flexbox technique on a recent project

Upvotes: 0

JRulle
JRulle

Reputation: 7568

#container{
background-color: yellow;
width:100%;
min-height: 100%;
}
#actualpage{
width:750px; 
margin-left:auto;
margin-right:auto;
padding-bottom: 20px;
}
#footer{
margin-top:-32px;
clear:both;
height:20px;
background-color:#A6CE39;
padding-top:6px;
padding-bottom:6px;
min-width:100%;
}


<div id='container'>
    <div id='header'>blabla</div>
    <div id='actualpage'>bblablabal</div>
</div>
    <div id='footer'>blablafooterblabla</div>

You need the footer outside of the container div. Also, the bottom: 0; attribute was unnecessary and the negative margin for the footer needed to include the padding, which adds to the computed height

** also, add the closing "'" to id='header

Upvotes: 0

JunM
JunM

Reputation: 7150

If you are referring to your footer, you may add position: absolute to your #footer

Fiddle

#footer {
    margin-top:-20px;
    clear:both;
    height:20px;
    background-color:#A6CE39;
    padding-top:6px;
    padding-bottom:6px;
    min-width:100%;
    bottom:0;
    position: absolute;
}

Upvotes: 1

Ahmedskaya
Ahmedskaya

Reputation: 389

add position:absolute; to your #footer and <div id='header> should be <div id='header'>

Upvotes: 1

Felix
Felix

Reputation: 38102

You can add position: fixed or position:absolute (if you don't want the footer stick to bottom while scrolling) to your #footer:

#footer{
    margin-top:-20px;
    clear:both;
    height:20px;
    background-color:#A6CE39;
    padding-top:6px;
    padding-bottom:6px;
    min-width:100%;
    bottom:0;
    position: fixed;
}

Upvotes: 1

Related Questions