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>