title: sticky footer on bootstrap creates a big gaps on content
body: <p>I tried to create custom navigation with sticky footer at the bottom, but it create big gaps between my navigation and the content, could someone help. sorry that my english is not that great. Thanks a lot .</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;sticky footer&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;!-- CSS --&gt;
       &lt;link href="css/style.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- Fav and touch icons --&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"&gt;
      &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"&gt;
        &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"&gt;
                      &lt;link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"&gt;
                                     &lt;link rel="shortcut icon" href="ico/favicon.png"&gt;
    &lt;/head&gt;
  
    &lt;body class="body"&gt;
  
  
      &lt;!-- Part 1: Wrap all page content here --&gt;
      &lt;div id="wrap"&gt;
  
                &lt;header class="mainheader"&gt;
                    &lt;nav&gt;
                        &lt;ul id="nav"&gt;
                          &lt;li class="current"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Proofreading&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Paraphrasing&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/nav&gt;
                &lt;/div&gt;
  
  
        &lt;!-- Begin page content --&gt;
        &lt;div class="container"&gt;
          &lt;div class="page-header"&gt;
            &lt;h1&gt;Sticky footer&lt;/h1&gt;
          &lt;/div&gt;
          &lt;p class="lead"&gt;Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.&lt;/p&gt;
          &lt;p&gt;Use &lt;a href="./sticky-footer-navbar.html"&gt;the sticky footer&lt;/a&gt; with a fixed navbar if need be, too.&lt;/p&gt;
        &lt;/div&gt;
  
  
  
        &lt;div id="push"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
        &lt;div class="container"&gt;
          &lt;p class="muted credit"&gt;Example courtesy &lt;a href="http://martinbean.co.uk"&gt;Martin Bean&lt;/a&gt; and &lt;a href="http://ryanfait.com/sticky-footer/"&gt;Ryan Fait&lt;/a&gt;.&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is my css:</p>
  
  <pre><code>/* Sticky footer styles
  -------------------------------------------------- */
  
  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }
  
  .body {
    margin: 0 auto;
    width: 70%;
    clear: both;
  }
  
  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
  }
  
  /* Set the fixed height of the footer here */
  #push,
  #footer {
    height: 60px;
  }
  #footer {
    background-color: #f5f5f5;
  }
  
  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
  }
  
  
  
  /* Custom page CSS
  -------------------------------------------------- */
  /* Not required for template or sticky footer method. */
  
  .container {
    width: auto;
    max-width: 90%;
  }
  .container .credit {
    margin: 20px 0;
  }
  
  
  
  /* NAVIGATION */
  
  
  .mainheader{
  clear: both;
  margin: 0px;
  padding: 0px;
  }
  
  .mainheader nav, .mainheader nav * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  
  .mainheader nav, .mainheader nav ul {
    font-family: 'Fjalla One', sans-serif;
    font-size:17px;
    text-transform:uppercase;
    list-style: none;
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    text-align: center;
  }
  
  
  .mainheader nav ul li.current &gt; a {
     color: #fff;
     background:#f16d3c; 
  }
  
  .mainheader nav ul li {
     float: left;
     width: 20%;
  }
  
  .mainheader nav ul li:last-child &gt; a {
    border:0px;   
  }
  
  .mainheader nav a {
  color: #000;
  text-decoration: none;
  width: 100%;
  background: #EEEEEE;
  border-right: 1px solid white;
  padding: 0.7em 1em;
  float: left;
  }
  
  
  .mainheader nav a:hover{
  color:#fff;
  background:#f16d3c;
  -moz-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
  -webkit-box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
  box-shadow:inset 0px 0px 40px 10px rgba(218, 98, 54, 0.75);
  }
  </code></pre>