プログラミング フロントエンド

CSSでフッターがコンテンツと重なってしまう原因と解決方法 WordPressテーマ作成にて

スポンサーリンク

今回はフッターとコンテンツが重なってしまってしまった時の原因と解決方法について書いていきます。
もし、同じように困っている方の参考になれば嬉しいです。

 

メモ

・あくまで考えられる原因の一つなので、以下の方法を試しても解決されない場合があります。

・「他にもこんな原因があるよ!」って意見がありましたら、Twitterまでご連絡ください。
(後日記事に追加させていただきます。)

 

 

フッターとコンテンツが重なるってどういう状態??(事象)

 

フッターがサイドバー(メインコンテンツ)と被ってしまっている

つまり、タグの下に表示されている状態

フッターとコンテンツが重なってしまった原因は??

 

<div></div>の数が一致していなかった事によるレイアウト崩れ

誤りパターン


<!--?php get_header(); ?-->
<div class="container">

 
<div class="contents">

<!--?php if(have_posts()): the_post();?-->

<article php="" post_class="" article-content="">>       </article></div>
←不要(end contentsになってしまう)   <!--(省略)←タイトルやアイキャッチ画像、本文などを取得-->

 

</div>

<!--end contents--> <?php get_sidebar();>

<!--end container--> <!--?php get_footer(); ?--> 

 

どうすればフッターが最下部に固定されるのか?

不要な</div>を削除した

正しいパターン


<?php get_header(); ?>
<div class="container">
  <div class="contents">
    <?php if(have_posts()): the_post();?>
    <article <?php post_class('article-content'); ?>>
      <!--</div>←不要(end contentsになってしまう)-->

<!--(省略)←タイトルやアイキャッチ画像、本文などを取得-->

  </article>
 </div><!--end contents-->
  <?php get_sidebar(); ?>
</div><!--end container-->
<?php get_footer(); ?>


ちゃんと最下部に固定されて正しく表示されました!

スポンサーリンク

-プログラミング, フロントエンド
-,

© 2021 エンジニア×ライフハック Powered by AFFINGER5