页脚定位问题 - 推下身体内容

Question

我有问题的页脚，并花了很多小时。实际上，脚本在身体内容下推动。这里是demo page。

HTML5结构

<div id="main" class="main"> 

<header> 
    <div class="wrapper"> 
    <div class="logo">      
    </div> 

    <div class="top-box">      
    </div> 

    <nav> 
     <div id="menu" class="menu">       
     </div> 
    </nav> 
    </div> 
</header> 

<div class="content" id="content"> 
    <div id="top-two-column"> 
    <div class="wrapper"> 

     <div id="top-slider-section"> 
      <div class="slider-wrapper theme-default"> 
       <div id="slider" class="nivoSlider"></div> 
      </div> 
     </div> 

     <div id="top-login-section"> 
      <div class="head"></div> 
      <div class="head-body"> 
       <div style="margin: 0 0 35px;"></div>      
      </div> 
     </div> 

    </div> 
    </div> 
</div> 

<div class="clear"></div> 

<div id="bottom-two-column"> 
    <div id="bottom-top20songs-section"> 
     <div id="switch-tabs"> 

      <ul class="tabs"> 
      <li><a href="#tabTop" class="headertitlewhite">TOP 20 SONGS</a></li> 
       <li><a href="#tabMost" class="headertitlewhite">MOST DOWNLOADED</a></li> 
      </ul> 

      <div class="content-section" id="tabTop20"> 
      <div class="songlists"></div> 
      <div class="songlists"></div> 
      <div class="songlists"></div> 
      </div> 

      <div class="content-section" id="tabMostDownloaded"> 
      <div class="songlists"></div> 
      <div class="songlists"></div> 
      <div class="songlists"></div>    
      </div> 

     </div>   
    </div> 

    </div> 

    <div class="clear"></div> 

    <footer> 
      Footer 
    </footer> 

CSS

html, body{ height: 100%; width: 100%; } 

.main{ margin: 0 auto; position: relative; width: 957px; } 

header{ height: 170px;} 

.wrapper{ width: 100%; min-height: 100%; overflow: hidden; } 

.clear{clear:both;display:block;overflow: hidden; visibility: hidden; width: 0;height: 0;} 

.top-box{float: right;padding: 5px 15px;background: #d80000;margin-top: 25px;margin-right: 0px; min-width: 350px;} 

nav{ margin-top: 100px;} 

.menu{ background: url(navigation-bg.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 50px; width: 100%; float: left;} 

.content{ padding: 2px;} 

#top-slider-section{width: 650px; float: left; 
background: url(slider-bg.png) no-repeat scroll 0 0/650px 285px rgba(0, 0, 0, 0);} 

#bottom-top20songs-section{ width: 650px; float: left;} 

#top-login-section{width: 280px;background: #303030;float: right;} 

.head{ background: url(topbox-bg.png) no-repeat scroll 0 -2px/280px 44px rgba(0, 0, 0, 0);height: 27px; padding: 7px 10px;} 

.head-body{padding: 7px 10px;border: 1px solid #bc0000; min-height: 230px;} 

#switch-tabs{background: url(topbox-bg.png) no-repeat scroll 0 -2px/650px 50px rgba(0, 0, 0, 0); height: 50px;} 

.tabs{ padding: 12px 12px 0 7px;} 
.tabs li{list-style: none; display: inline; } 
.tabs a { padding: 10px 7px; } 
.tabs a.active, .tabs a:hover { background: #8A0808 !important;border-radius: 10px; } 

.content-section{margin-top: 15px; padding: 7px 10px;border: 1px solid red;} 

.songlists{background: #fff;border-radius: 3px; min-height: 100px; margin: 10px 0;padding: 5px;} 


footer{bottom: 0;margin-top: 10px;width: 100%;height: 200px;position: relative;background-color: #D80000;} 

Answer 1

在mainAll.css文件试着从改变＃开关标签样式：

#switch-tabs { 
    background: url("../images/topbox-bg.png") no-repeat scroll 0 -2px/650px 50px rgba(0, 0, 0, 0); 
    height: 50px; 
} 

到：

#switch-tabs { 
    background: url("../images/topbox-bg.png") no-repeat scroll 0 -2px/650px 50px rgba(0, 0, 0, 0); 
}