Q&A
ご回答ありがとうございます。
試してみたところ、重なった部分をスクロールすることは出来るようになったのですが、表示自体はコンテンツに重なったままになってしまいます。
やはり、fixedにしてしまうと表示している画面の最下部に必ず固定という形になってしまいますでしょうか...
いつもお世話になっております。
Wordpressで作成しているサイトに表示されているフッターなのですが、コンテンツの量によってフッターの下に空白が空いていることに最近気づいたため修正をしようとしています。
position:fixedで最下部に固定しようかと思ったのですが、これでは画面サイズを小さくするとコンテンツがフッターに隠れてしまうようになってしまいました。
常にコンテンツの量や画面サイズに関わらず最下部にフッターを表示するにはどのように対応すべきでしょうか。
どなたかご教授お願いします。
PHP
1<div class="tabs_wrap"> 2 <ul class="tabs"> 3 <li><a href="#">テスト1</a></li> 4 <li><a href="#">テスト2</a></li> 5 <li><a href="#">テスト3</a></li> 6 </ul> 7 <div class="tabs_content"> 8 各種コンテンツ 9 </div> 10</div> 11 12<?php get_footer(); ?> 13
CSS
1footer { 2 width:100%; 3 bottom: 0; 4 position: fixed; 5}
回答2件
0
ベストアンサー
以下でどうでしょう？
コンテンツ量によりフッターを動かすなら。
参考:https://codepen.io/chriscoyier/pen/YWKNrE
html
1<body> 2 3<div class="wrap"> 4 コンテンツ 5</div> 6<footer class="footer">フッタ</footer> 7 8</body>
css
1html { 2 height: 100%; 3} 4body { 5 min-height: 100%; 6 display: grid; 7 grid-template-rows: 1fr auto; 8 margin: 0; 9} 10.wrap { 11} 12.footer { 13 background-color: #ccc; 14 grid-row-start: 2; 15 grid-row-end: 3; 16} 17
フッターを固定するなら
html
1<div class="wrap"> 2 コンテンツ 3</div> 4<footer class="footer">フッタ</footer>
css
1body { 2 position: relative; 3 margin: 0; 4} 5.footer { 6 background-color: #ccc; 7 position: fixed; 8 left: 0; 9 bottom: 0; 10 width: 100%; 11}
javascript
1// jquery 2var footerHeight = $('.footer').outerHeight(); 3$('.wrap').css('padding-bottom', footerHeight + 'px');
投稿2018/05/21 13:43
総合スコア229
0
position fixed や absolute にするならば
重なってはいけないContentsに
padding-bottom : ( footer の height + α )
を設定しましょうか
投稿2018/05/21 12:37
編集2018/05/21 12:38
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/23 10:31