使用bootstrap设置页脚底部

时间:2016-03-12 01:41:02

标签: html css twitter-bootstrap footer

您好我正试图将页脚粘贴在页面底部,即使我的页面内容很薄。

我尝试使用下面的CSS代码,但它不起作用。

有什么建议吗?

CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>  
  </head>
  <body>     
    <aside class="left-panel">        
    </aside>
    <section class="content">
      <header class="top-head container-fluid">
      </header>
      <!-- Header Ends -->      
      <div class="warper container-fluid">  
        <div class="page-header"><h1>Blank Template <small>Start new page with this</small></h1></div>                             
        <!-- Work Here --> 
      </div>
      <!-- Warper Ends Here (working area) -->
      <footer class="container-fluid footer">
        Copyright &copy; 2014 <a href="#" target="_blank">test</a>
        <a href="#" class="pull-right scrollToTop"><i class="fa fa-chevron-up"></i></a>
      </footer>
    </section>
    <!-- Content Block Ends Here (right box)--> 
  </body>
</html>

0 个答案:

没有答案