css - 页脚定位问题 - 推到正文内容下方

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 样式:

#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);
}