如何創建動態頁腳

Question

自很多天以來，我經歷了很多帖子，但是沒有發現任何有用的信息。 我正在使用Bootstrap開發網站。 我已經創建了頁腳，但是它不能在所有頁面上正常工作，無論它位於一個頁面還是另一頁面之間，或者在某些頁面中都留有右邊的空間。 我也嘗試過jQuery，但沒有成功。

我想創建一個與stackoverflow上的頁腳類似的頁腳，該頁腳始終位於所有頁面的底部，當滾動到最后時我們可以看到它。 我在主主頁上有頁腳，其余頁面是子母版頁和子頁。

 <div class="footer navbar-fixed-bottom">
        <div class="container text-right">
            <div id="socialMedia">
            </div>
        </div>
    </div>

.css

 html {
 height: 100%;
 box-sizing: border-box;
 }

 *,
 *:before,
 *:after {
 box-sizing: inherit;
  }

  body {
  position: relative;
  margin: 0;
  padding:0;
  min-height: 100%;
  margin-bottom:-50px;
     }

   .footer {
   position: absolute;
   right: 0;
   bottom:0;
   left: 0;
   padding:0;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;

} 

Answer 1

發現這里的代碼片段非常適合引導

HTML：

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS：

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
} 

來源： 演示和教程

Answer 2

只是不將頁腳設為絕對，而是像這樣相對：

.bodyContent {
  position:relative;
  padding:20px;
  margin-bottom:50px;
}

.footer {
   position: relative;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;
} 

在這里，您的代碼以及對JSFiddle的修復。