Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Responsive Sticky Footer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
​
     <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
​
    </head>
    <body class="container"> 
        <div class="block header_block">
            <h1>Responsive Fixed Header</h1> 
        </div>
​
​
        <div class="block push body_block">
            <h2>Body Content</h2> 
​
        </div> 
​
        <div class="block footer_block">
            <h2>Responsive The Sticky Footer</h2> 
            <h1>cool</h1>  
        </div>
    </body>
    </html>
 
    html {
        height: 100%;
    }
    .container {
        display: table;
        height: 100%;
    }
    .block {
        display: table-row;
        height: 1px;
    }
​
    .push {
        height: auto;
    }
​
    .container {
        width: 100%;
        margin: 0 auto;
    }
    .block:nth-child(odd) { 
    }
​
    .header_block{
        background: grey;
    }
​
    .body_block{
        background: lightblue;
     }
​
    .footer_block{
            background: green;
​
    }
​
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
4goodapppro
0viewers