帶邊欄的粘性頁腳

Question

我想將Bootstrap Sticky Footer example添加到此Simple Sidebar example的白色區域。

我掙扎着，因爲我不能工作。當內容不適合屏幕時我失敗，或者當內容超過它時我失敗。

任何提示？

謝謝大家。

Answer 1

只要確保div在白色區域內居中。

然後在造型中使用絕對位置或相對位置。

看看我的代碼，並注意腳註div放在html中的位置以及樣式是如何寫入的。希望這有助於。

<meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Simple Sidebar - Start Bootstrap Template</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/simple-sidebar.css" rel="stylesheet"> 
    <style> 
     .footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 60px; 
    background-color: #f5f5f5; 
    } 
    </style> 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

<div id="wrapper"> 

    <!-- Sidebar --> 
    <div id="sidebar-wrapper"> 
     <ul class="sidebar-nav"> 
      <li class="sidebar-brand"> 
       <a href="#"> 
        Start Bootstrap 
       </a> 
      </li> 
      <li> 
       <a href="#">Dashboard</a> 
      </li> 
      <li> 
       <a href="#">Shortcuts</a> 
      </li> 
      <li> 
       <a href="#">Overview</a> 
      </li> 
      <li> 
       <a href="#">Events</a> 
      </li> 
      <li> 
       <a href="#">About</a> 
      </li> 
      <li> 
       <a href="#">Services</a> 
      </li> 
      <li> 
       <a href="#">Contact</a> 
      </li> 
     </ul> 
    </div> 
    <!-- /#sidebar-wrapper --> 

    <!-- Page Content --> 
    <div id="page-content-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h1>Simple Sidebar</h1> 
        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
        <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 

        <footer class="footer"> 
        <div class="container"> 
         <p class="text-muted">Place sticky footer content here.</p> 
        </div> 
        </footer> 


       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /#page-content-wrapper --> 

</div> 
<!-- /#wrapper --> 

<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

<!-- Menu Toggle Script --> 
<script> 
$("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
}); 
</script> 

Answer 2

有一個sticky-footer-navbar.css似乎缺少在側邊欄示例中。這裏是該css文件的內容

/* Sticky footer styles 
-------------------------------------------------- */ 
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; 
} 


/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

body > .container { 
    padding: 60px 15px 0; 
} 
.container .text-muted { 
    margin: 20px 0; 
} 

.footer > .container { 
    padding-right: 15px; 
    padding-left: 15px; 
} 

code { 
    font-size: 80%; 
}