Footer below content, but not floating mid-air if not enough content

This is the easiest way I have found to make a good footer. Wrap everything but your footer in a "wrapper" div. Then set your html and body height to 100%, with a min-height of 100% on your wrapper. Next, you need to give a bottom margin and bottom padding to this wrapper that is the same height as your footer. It works like a charm.

Demo here

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
footer {
    height: 100px;
}

You can use this responsive css code and it is working in all browser's and it can changed according to browser size when browser can resized.

Live Working Demo

HTML Code:

<div id="wrapper">

    <div id="header">
        Header is here
    </div><!-- #header -->

    <div id="content">
        Content is here
    </div><!-- #content -->

    <div id="footer">
        Footer is here
    </div><!-- #footer -->

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

CSS Code:

  html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    background:#ededed;
    padding:10px;
    text-align:center;
}
#content {
    padding-bottom:100px; /* Height of the footer element */
    text-align:center;
}
#footer {
    background:#ffab62;
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
}

Result:

result


Solution with flex position here: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/


If the height of the footer is unknown, it's best to use flex, something in the lines of: 

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

And for CSS only this is needed:

body { 
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}
.content {
   flex: 1;
}

And you don't need to set display:flex to body, it can be a wrapper inside the body too.

Keep in mind this might not work as expected on IE (see CanIUse link below). It works pretty good for most now though!

CanIUse link
See this link for an example.

Tags:

Html

Css

Footer

Twitter Bootstrap 3

Recent Posts