DokuWiki Bootstrap3 テンプレートで固定フッターを実装する

, ,

DokuWiki フックにも :footer を記述するとフッターを記述できますが、特に Bootstrap3 テンプレートを使うと、フッターが container の幅に収束されてしまいます。

モバイル端末でよく見るページ下部にメニューを配置するなら、HTML埋め込みを利用して固定フッターを実装します。 

<html>
<!-- コンテンツが固定フッターに隠れないよう
     固定フッターと同じ高さのスペーサーを設ける -->
<div style="display: block; height: 100px;">
</div>

<!-- 固定フッター -->
<div class="fixed-footer">
  <div class="container">
    <div class="row" style="height: 100px">
    </div>
  </div>
</div>

<style>
/* 既存のフッターは邪魔になることが多いので非表示に */
footer#dw__footer {
  display: none;
}

/* ページ下部の編集情報も非表示に */
span.docInfo {
  display: none;
}

/* 固定フッターを表示 */
div.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  padding: 10px;
}
</style>
</html>