Footer is in the middle of short pages

Question

I cannot make a footer sticky in the bottom of the page. I have read dozens of tutorials and still have a problem. In pages with contents that cover all the window, the footer is sticked in the bottom without a problem. But in pages without a lot of content, the footer is in the middle of the page.

<html><body>

 text here text here

 <footer id="footer">
  Im in the footer and bottom of the page!
 </footer>

</body></html>


body {
  background: url('/static/img/bg.png');
  min-width: 1300px;
  height: 100%;
}

footer {
 clear: both;
 padding-top:20px;
 padding-bottom:20px;
 background-color:#222;
 margin-top: 15px;
 color: white;
 text-align: center;
 }

I have tried to add position:absolute or position:fixed and bottom:0px in the footer, but then the results are worst. There is a blank space after footer.

I really like this one by Stuart Nicholls: http://www.cssplay.co.uk/layouts/basics2.html — Joel Etherton, Jul 24 '14 at 16:13

ivanfromer · Answer 1 · 2014-07-24T16:25:45.647

You can try this

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
    padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}

This an HTML

Below is the basic structure of the HTML code. You'll notice how the footer sits outside of the wrap .

<div id="wrap">

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

You would place your content elements inside the main . For example, if you were using a 2 column floating layout you might have this;

<div id="wrap">

    <div id="main">

        <div id="content">

        </div>

        <div id="side">

        </div>

    </div>

</div>

<div id="footer">

</div>

A header could be placed inside the wrap but above the main like this;

<div id="wrap">

    <div id="header">

    </div>

    <div id="main">

    </div>

</div>

<div id="footer">

</div>

Can you please add a short code of how you use main and wrap? — Tasos, Jul 24 '14 at 16:23

score 0 · Answer 2 · answered Jul 24 '14 at 16:24

You can use position:fixed and bottom:0px; like this:

 footer {
 clear: both;
 padding-top:20px;
 padding-bottom:20px;
 background-color:#222;
 margin-top: 15px;
 color: white;
 text-align: center;
    position:fixed;
    bottom:0px;
    width:100%;
 }

The footer remains at the bottom no matter how much content the body has. To remove white spaces around it and make it's width 100% you need to remove margin and padding:

body,html {
  background: url('/static/img/bg.png');
  width:100%;
  height: 100%;
    padding:0;
    margin:0;
}

Footer is in the middle of short pages

2 Answers2

JSFiddle Demo