bootstrap上的粘性頁腳在內容上創建了很大的空白

我試圖用底部的粘性頁腳創建自定義導航，但它在我的導航和內容之間創建了很大的差距，有人可以幫忙。對不起，我的英語不太好。非常感謝。bootstrap上的粘性頁腳在內容上創建了很大的空白

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>sticky footer</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- CSS --> 
    <link href="css/style.css" rel="stylesheet"> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> 
    <!--[if lt IE 9]> 
     <script src="js/html5shiv.js"></script> 
    <![endif]--> 

    <!-- Fav and touch icons --> 
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"> 
        <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"> 
            <link rel="shortcut icon" href="ico/favicon.png"> 
    </head> 

    <body class="body"> 


    <!-- Part 1: Wrap all page content here --> 
    <div id="wrap"> 

       <header class="mainheader"> 
        <nav> 
         <ul id="nav"> 
         <li class="current"><a href="index.html">Home</a></li> 
         <li><a href="#">Proofreading</a></li> 
         <li><a href="#">Paraphrasing</a></li> 
         <li><a href="#">FAQ</a></li> 
         <li><a href="#">Contact Us</a></li> 
         </ul> 
        </nav> 
       </div> 


     <!-- Begin page content --> 
     <div class="container"> 
     <div class="page-header"> 
      <h1>Sticky footer</h1> 
     </div> 
     <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> 
     <p>Use <a href="./sticky-footer-navbar.html">the sticky footer</a> with a fixed navbar if need be, too.</p> 
     </div> 



     <div id="push"></div> 
    </div> 

    <div id="footer"> 
     <div class="container"> 
     <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
     </div> 
    </div> 



    </body> 
</html>

，這是我的CSS：

/* 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 > a { 
    color: #fff; 
    background:#f16d3c; 
} 

.mainheader nav ul li { 
    float: left; 
    width: 20%; 
} 

.mainheader nav ul li:last-child > 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); 
}

來源

2013-04-23 user761497

對於接下來的時間，儘量減少你的代碼到最小的用例，而不是拋出整個html和css文件。 – Archonic 2013-04-23 19:21:30