Untitled

/*footer */
#footer .column {
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
    <h1>kulbhushan charaya</h1>
</footer>
</body>

body {
    background: #ffffff none repeat scroll 0 0;
    padding:40px 0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
header ul li {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
header ul li a {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footer h1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 0 15px;
  z-index: 1;
}

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

<footer class="footer">

</footer>

#main {padding-bottom: 150px;} /* Should have the same value of footer's height */
#footer {position: relative;
margin-top: -150px; /* footer's height */

<div id="wrap">
    <div id="content">
        /* Main body content */
    </div>
</div>

<div id="footer">
    /* Footer content here */
</div>

html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer {
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
}

<body>
    <div class="top-nav">My Nav Bar</div>
    <div class="main-container">
        All my content
    </div>
    <div class="footer">
        My footer
    </div>
</body>

.top-nav {
    height: 4rem;
}
.main-container {
    min-height: calc(100vh - 4rem - 4rem);
}
.footer {
    height: 4rem;
}

.main-container {
  min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}