ど素人から毛を生やす。<延>

フッターの下の謎の隙間を排除せよ!

Web > css 2014年6月20日(最終更新:3年前)

このページは2014.6.20に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
なんだかんだでコーディングの方が好きな餅。です。

舞い込んでくる仕事はCMSばっかりですが。
無駄に細かく拘った無駄に美しいサイトを作るのが好き。
どっちかというとシンプルでスタイリッシュなデザインのが好きです。

 

というわけで、本日はコーディングの話。

SPサイトを作ろう、という話になりまして、
数カ月前に作ったPCサイトのデザインを確認しながらデザインしていたのですが。

h260620

こんな隙間、コーディングしたときには無かったハズ……

サイト運営に支障はありませんが、これは美しくない。
取り敢えずエレメントを確認してみました。

h260620_2

以前、解析系スクリプトをfooterの下、bodyの上に突っ込んだのですが、
それらが勝手にimgとspanを出力してしまったようです。

CSSからbody直下のimgとspanにposition:absoluteを指定。高さをなくします。
これで解決しました。

特に、スクロールバーが表示されているのにフッター下に隙間ができるという場合。
まずはエレメントから、フッターの下に高さ要素を持つものが出力されていないか
チェックするのをお勧めします。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (2)
  • (・∀・) 参考になった (2)
  • (`・ω・´) 役に立った (2)