[CSS] コンテンツが少ないときの“よだれかけ”状態を防ぐ方法 : してログ

[CSS] コンテンツが少ないときの“よだれかけ”状態を防ぐ方法

CSS 201314

メインコンテンツが少ないときに、不恰好になってしまうサイトデザインになってしまうこと、ありませんか? このサイトもそうでした。メインコンテンツが長く詰まっているページだとイメージどおりでも、数行程度の短いコンテンツでは、広告ばかりが目立ち、コンテンツの終わりの枠が、赤ちゃんの“よだれかけ”のように捲れ上がってしまいます。

そんなときに便利なのが、min-height です。これを div などに指定すると内容が少なくてもそれ以下のサイズにはなりません。これを使えば、フッタにゴテゴテ入れた広告が必要以上にせり上がることも無くなり、非常に見た目がよろしくなります。マージン取るのに <br /> たくさん入れるのは止しましょう。

<div class="contents_outer" style="min-height:100em;">
  <div class="contents" style="min-height:40em;">
    ... メインコンテンツ ...
  </div>
  <div class="ad"> ... 広告のコード ...</div>
</div>

この例は、広告がトップから 40em 以下に上らないようにし、コンテンツの枠自体も 100em を切らないように制限した、当サイトの CSS の指定です。

0 件のコメント
名前:
コメント: