css - Responsive footer always in bottom -

i'm having trouble creating responsive footer stay on bottom of page. code i'm using this:

body {     margin: 0 0 200px; //same height of footer } footer {     position: absolute;     left: 0;     bottom: 0;     height: 200px;     width: 100%;     overflow: auto;     background-color: rgba(67, 191, 115, 0.95); } 

i use:

<div class='main-content'> //content </div> <footer> //footer content </footer> 

well, problem if resize screen , content larger resolution footer lets white space, this:

i trying solve problem. if use position: fixed problem disappears, don't want footer following scroll. think problem in 100 percent width. footer of site, stack overflow, works need. if resize window footer remains same, no white space. how achieve this? how make footer cover width without let white space if resolution lower page occurs here, in stack overflow?

try code....
css

html, body {   height: 100%;   /* html , body elements cannot have padding or margin. */ }  /* wrapper page content push down footer */ #wrap {   min-height: 100%;   height: auto;   /* negative indent footer height */   margin: 0 auto -60px;   /* pad bottom footer height */   padding: 0 0 60px; }  /* set fixed height of footer here */ #footer {   height: 60px;   background-color: #f5f5f5; }   /* custom page css -------------------------------------------------- */ /* not required template or sticky footer method. */  .container {   width: auto;   max-width: 680px;   padding: 0 15px; } .container .credit {   margin: 20px 0; } 

html

  </ul>     <form class="navbar-form navbar-left" role="search">       <div class="form-group">         <input type="text" class="form-control" placeholder="search">       </div>       <button type="submit" class="btn btn-default">submit</button>     </form>     <ul class="nav navbar-nav navbar-right">       <li><a href="#">link</a></li>       <li class="dropdown">         <a href="#" class="dropdown-toggle" data-toggle="dropdown">dropdown <b class="caret"></b></a>         <ul class="dropdown-menu">           <li><a href="#">action</a></li>           <li><a href="#">another action</a></li>           <li><a href="#">something else here</a></li>           <li class="divider"></li>           <li><a href="#">separated link</a></li>         </ul>       </li>     </ul>   </div><!-- /.navbar-collapse --> </nav>        <!-- begin page content -->       <div class="container">          <div class="page-header">           <h1>sticky footer</h1>         </div>         <p class="lead">pin fixed-height footer bottom of viewport in desktop browsers custom html , css.</p>         <p>use <a href="../sticky-footer-navbar">the sticky footer fixed navbar</a> if need be, too.</p>       </div>     </div><!-- wrap div end -->      <div id="footer">       <div class="container">         <p class="text-muted credit">example courtesy <a href="http://martinbean.co.uk">martin bean</a> , <a href="http://ryanfait.com/sticky-footer/">ryan fait</a>.</p>       </div>     </div>       <!-- bootstrap core javascript     ================================================== -->     <!-- placed @ end of document pages load faster -->   </body> </html>