デベロッパーズブログ

  1. HOME > 
  2. 伊藤 晋之のデベロッパーズブログ > 
  3. 結果、clearfixで半日つぶされた件

伊藤 晋之のデベロッパーズブログ

伊藤 晋之

2013/07/25

結果、clearfixで半日つぶされた件

 

ディレクターの伊藤です。今朝、通勤途中にカブト虫を拾いました。夏ですねぇ~

さて、先日半日ほど頭を悩まされた事があり原因が意外なところにあったので紹介いたします。

WordPressにて構築をさせていただきました案件で、ページ内リンクで飛ばすコンテンツがありました。他のページの挙動を確認しても何も問題なかったのですが、ページ内リンクのコンテンツへの導線ボタンをクリックすると飛んだ先のページのフッターの下部に、8px程度の余白が出来ておりましてそれがページ全体に影響を及ぼしヘッダーが8pxブラウザの表示領域から飛び出してしまうという現象が起きました。
これについて、あれやこれやと試してみたものの初めてのケースだった事もあり外部のコーダーさんに相談をしてみました。そこでいただいた解決方法としてフッターのfloatの処理を、clearfixではなくoverflow: hidden で行うといったものでした。

一時 clearfix ばっかり使っていましたが、最近はhtmlに clearfix が溢れかえるのがみっともなかったので overflow: hidden ばかり使っておりましたのでこの施策がどのような影響を及ぼすのか皆目検討もつきませんでしたが…
なんと、隙間もなくなり意図した表示となりました。その後、clearfix について調べてみるとこの記事を見つけました。「clearfixで下マージン(スペース)が発生してしまう - TREND SPOTTING

こんな事があるのですね!でも、何故他のページでは現象が起きなかったのにページ内リンクのコンテンツに飛ぶと起きるのか…疑問は残りますが、一つ解決できた事は良かったです。

関連タグ: clearfix  overflow:hidden  カブト虫 

お気軽にお電話ください 052-875-9930 年中無休にて対応しております

メールでのお問い合わせはこちら

お問い合わせフォーム

ページの先頭へ戻る

ページトップへ戻る