wordpressでフッターを一番下に固定したい

wordpressのlightningを使用していますがページ内のコンテンツが少ない場合フッターの下に余白が開いてしまいます。

そこでフッターを常にページの一番下に固定したいのですがどうすればよいでしょうか。

調べたところhtmlに

  コンテンツ

<div class="push"></div>

</div> <footer class="footer">フッタ</footer> </body>

cssに
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;

/* フッタの高さと等しいネガティブマージン /
/ また最後の子要素の潜在的なマージンとしても機能 */
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}

とありました。試してみましたが変化がありません。
html部分はheader.phpに記述で間違いないでしょうか。

dit.

2018/09/03 02:36

一から自分でテーマを作るわけではなくlightningをカスタマイズしたいということですか？

kakaka100

2018/09/03 02:48

そのとおりです。

行動規範の内容に同意します

回答2件

ベストアンサー

コンテンツが長くても短くても常に固定でよければ、外観-カスタマイズ-追加CSSに以下のように記述すればとりあえず固定はされます。

css
1div.siteContent{
2	margin-bottom:200px; /* ご自身のサイトに合わせて要調整。フッターで隠れる部分のマージン */
3}
4footer{
5	position:fixed;
6	bottom:0;
7	left:0;
8	width:100%;
9}

ウィジェットとかが登録されているとその分高さが必要になるので、メインエリアの高さが減りますが、それは考慮してません。
画面幅によってフッターの高さが変わるような場合はメディアクエリを適宜追加してください。

投稿2018/09/03 03:02

dit.

総合スコア3235

kakaka100

2018/09/03 06:05

コンテンツが少ないページにのみ上記のcssを当てれば問題ありません。ありがとうございます。

行動規範の内容に同意します

html
1<body>
2  <header></header>
3  <div id=main></div>
4  <footer></footer>
5</body>

css
1header{
2  height: 50px;
3  background: skyblue;
4}
5footer{
6  height: 60px;
7  background: palegreen;
8}
9#main{
10  min-height: calc(100vh - (50px + 60px) );/*ポイント*/
11}