Webサイト開発・運営

HTML5(じゃなくてもいいと思うが)でサイドバーの高さを本文部分と揃えるCSS

CSS

今年はHTML5でしかコーディングしておりません。
それ以前からも自然と2カラムのサイトが多いのですが、回り込み解除とかは有名なclearfixなどでそれなりに解決してきたと思います。

しかし、背景色、サイドバーの背景色、本文部分の背景色が指定されたときに、初めて目に見える形で上記の図の左側のような問題が現れてきます。サイドバーが実はフッターまでひっぱられることなくコンテンツが存在する部分で終わってしまっているのです。tableレイアウトでやっている方には想像しがたいかもしれませんが、divタグとcssでレイアウトしているとこんなことが起こっているのです。

今までの案件で対症療法的に対応したものもあり、またそれなりに解決していた案件もありました。だがしかし、直面している案件でなぜかハマってしまい、相当悩んでいました。何故か・・・。

解決策はいくつかありそうなのですが、ネット上の声を借りて良さそうな方法を教えて頂きました。

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

ああ、このやり方検索しているうちに見たことがある、と思ったのですが、こうやって日本語で書かれているページがあると何故か安心するものです。

[php]padding-bottom: 32768px;
margin-bottom: -32768px;[/php]

 

Columnas 100% altas:P-4

3万ピクセルを超える指定が怖いと思うところですが、これでうまく行きました。

ポイントはfloatする親要素にあたるdivタグのスタイルにoverflow:hidden;を指定し、floatするdivタグ自身に上記のpadding-bottomとmargin-bottomを指定することです。

取り急ぎ、Mac FF8,Safari5 Windows IE8で確認できました。

  • この記事を書いた人
  • 最新記事

wackey

Webディレクター・プロデューサーなどで大手企業サイトの構築に携わった後、インターネット広告営業やWebコンサルティングなどを行う。フリーランスを経て2012年にプラス・ムーブメント合同会社を設立。Webサイト・システムの制作やブロガーツアー・イベントなどの企画・運営を行う。地域ブログをまとめたLocketsというサービスの事業責任者としてビジネスを展開。 2015年にアジャイルメディア・ネットワーク株式会社に入社。 レビューズにてインフルエンサーマーケティング事業の立ち上げに関わり運営。またアンバサダープログラムの運営など多くの企業の支援をバックアップしていた。 現在プラス・ムーブメント合同会社を経営しつつ、新しい働き方について模索している。 主な著書に「アフィリエイターのための Web APIプログラミング入門(ビー・エヌ・エヌ新社)」がある。

-Webサイト開発・運営