カラムの高さを揃える はてなブックマーク - カラムの高さを揃える

images

以前ポートフォリオ用に作成した架空サイトに、2カラムのレイアウトでサイドバーに背景色を指定したデザインがありまして。

イメージとしては左図のような感じのサイトなんですが。

divで囲んで、floatで2段組みに…とコーディングを進めていくと、サイドバーよりもメインコンテンツの内容が増え、ページが縦に長くなり、ページによってはサイドバーの背景色が途中で途切れてしまう。

要するに、各divの高さが揃わなくなり、サイドバーの下方が足りなくなってしまいました。初心者的には少し悩む展開です。

以下、今回の事態を図にしてみました。
カラムの高さが揃わないの図
…調べましょう。「div」「カラム」「高さ」「合わせる」「揃える」…この辺のワードを組み合わせていざ検索。

カラムの高さを揃えるCSS(数ある方法の中の一つ)

調べてみると、「divの高さを揃える手段」としてpadding-bottomとmargin-bottomに特定の数値を入れるやり方が見つかりまして、今回はその指定の仕方を使用しました。ええ、そうです例の-32767pxとか指定するアレです。

参考サイトはこちら↓

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

html
</pre>
<div id="container">
<div id="sidebar"><!--sidebarの内容--></div>
<!--end div#sidebar-->
<div id="main"><!--mainの内容--></div>
<!--end div#main--></div>
<pre>
<!--end div#container-->
CSS
#container {
    overflow: hidden;
}
#sidebar {
    width: □px;
    margin-bottom: 32767px;
    padding-bottom: -32767px;
    float: left;
}
#main {
    width: ■px;
    margin-bottom: 32767px;
    padding-bottom: -32767px;
    float: left;
}

それぞれ必要に応じて背景など指定します。

32767pxというのはブラウザが認識できる最大数値らしいです。べつに32767でなければならないわけではなく、必要な高さが得られるなら10000pxでも9000pxでも大丈夫。ただし、コンテンツ量・内容量が増え、その設定以上の高さが必要になった場合、レイアウトは崩れる模様。

このCSS指定は2007年頃には結構知られていた方法のようです(調べたら2007~2008年頃の記事に取り上げられている印象を受けたので)。

テーブルレイアウトから(X)HTML+CSSに移行されていく過程の中で、CSSで複数カラムを揃える方法の一つとして挙げられた手法(?)のようですね。2010年頃からWebの学習を始めた私には、そうとう遅ればせながら知った方法なんですが。

この指定方法、初めて知ったときは「助かったー!」と思ったのですが、実際使うとなるとそれなりに制約があるようです。多くの人が取り上げてきた話題でもあるので、いまさら感満載ですが、自分の勉強のために以下注意点を覚え書き。

±32767pxを指定する際の注意点

この指定をすると、要素内にページ内リンク(ジャンプ)を付けることができなくなるようです。自分が試した中では、#main下部の情報に『ページ内リンク』をつけたところ不具合が生じまして、この辺について調べてみました。調べたって言っても検索しただけですがね。

どうも元々(2007年頃から?)指摘されていた不具合だったようです。

padding-bottomとmargin-bottomに指定した高さは、overflow:hiddenによって画面上には表示されません。が、表示されないだけで存在はしているので、ページ内リンクなどで該当箇所へ移動させると、表示位置が変わり、元々あったページ上部の内容が↑にズレます。このズレた分の内容は要素から「あふれた」ことになりhiddenされてしまうみたいです。

ページ内リンクの不具合の図

…図が分かりにくいのはスミマセン、初心者のノートなんで今はこれが精一杯。

±32767px指定外の要素のリンクは通常運行です。ページ移動用のナビゲーションとかは普通に動きます。でも±32767px指定内の要素にリンク(ジャンプ)させると不具合がでます

それ以外にも、margin-bottom、padding-bottomのプロパティを使用してしまうので細かく余白指定したい場合には不向きでしょうか。

最大数値(しかも5ケタだよ…)を仮定して、余剰分はhidden、というCSS指定は多少強引な方法なようですね。必要に応じて検討すれば便利な方法だと思うのですが、なにぶん制約も多い。

まぁ、今はJavascriptとかjQueryでカラム高さ調整することができるみたいですが…。


« »

Comment

当ブログにお越しいただきありがとうございます。
記事に対するコメント、不備の指摘などありましたらひっそりと書き残していただけると幸いです。
※コメントは承認制となっております

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

trackback / pingback

ページトップへ