metal.izeにエントリーされていたスタイルシートを紹介します。
Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。
sample:高さがばらばらのdiv
sample:高さが揃ったdiv
スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。
詳しくは、最小限にしたサンプルを作成したので参照ください。
高さの異なるカラムを揃えるスタイルシートのサンプル
下記の「32768px」って、何か特別な意味があるのでしょうか。
padding-bottom: 32768px;
margin-bottom: -32768px;
Post on:2007年10月25日
32768×2＝65536
256×256＝65536
描画限界的な何か…ですかね。
ブロックレベル要素の高さを揃える…
1日に2エントリーもするなんて、、、 [CSS]高さの異なるカラムを揃えるスタイルシート | コリスを読んでてなんだか気になったので、ちょっと自分でも試してみました。 (more…)
情報、ありがとうございます。
ブラウザの限界値に関係しているようですね。
32768px情報、ここら辺にもありました。
OpenLayers
OpenLayers
また、32768pxは2の15乗という情報もありました。
これかなぁ。
Microsoft サポート
Windows 95、Windows 98、Windows Meで、16 ビット符号付き整数(32767 人両端を含む32,767を介して -32768 から範囲へある)によって表されることができるより、大きく返すことができません。
高さの異なるカラムを揃えるスタイルシート…
http://coliss.com/articles/build-websites/operation/css/558.html 各divに対して「padding-b (more…)
float属性を持つ子の親が正しくheightを得られるよう…
高さの異なるカラムを揃えるスタイルシートの、（もしかしたらとてもスタンダードかもしれない）特殊な用例です。 (more…)
[HTML][Design] divレイアウトカラムの高さを…
http://coliss.com/articles/build-websites/operation/css/558.html の記事から。揃えたいそれぞれのカラム (more…)
それらを囲んでいるdiv要素に、
overflow: hidden;
も指定しておく必要ないですか？
> こうちかずお さん
「overflow: hidden;」は、必要ですよ。
誤解がでてしまったので、その辺りを修正しました。
バラバラのブロック要素の高さを揃えるネタ…
div要素などのブロック要素を並べたとき（コンテンツとサブナビの2カラムレイアウトなど）、デザイン的にそれぞれの要素の高さを揃えたいという場合がある。 (more…)
高さの違うカラムのお尻を揃えるCSS…
テーブルコーディングだと問題ないわけですが、 CSSコーディングだと、これが意外と厄介なわけです。 方法はいくらかあるんでしょうけど、 こないだこれのすごく簡単なやり (more…)
コリスさん、こんにちは。
遅ればせながらこちらで紹介して下さっている方法を試してみたのですが、どうやら、ページ内アンカーリンクがある場合に、アンカーに飛ぶと、そこまでの領域がoverflow: hiddenの中に入ってしまうという、致命的な不具合を見つけました。 なので、多少使うシーンを選ぶ必要があるようです。
CSSレイアウトの弱点を埋める革新的なテクニックだと思っただけに、とても悲しいです。
> wu さん
情報、ありがとうございます。
ちょっと、wuさんの説明いただいた状況がよく分からないので、よければ、詳細やサンプルなど教えていただけますか？
とりあえず、ページ内アンカーを設置したサンプルページを用意してみました。
サンプルページ(h2-01)
コリスさん
返信ありがとうございます。
僕は自分の配付テンプレートでこのテクニックを利用させて頂いたのですが、例えば以下のページ
不具合の再現ページ1
このページのコメント部分のフラグメント識別し(#comments)を利用してリンクを設定した場合、次のようになってしまいます。
不具合の再現ページ
コリスさんのサンプルページですと、
サンプル (不具合を再現)
となります。
何か解決方法は無いかと試行錯誤しているのですが、今のところどうにもできていません。涙
> wu さん
やっと、意味が分かりました。
ページ内アンカーへのリンクをクリックすると、消えてしまいました。
これは、けっこう致命的ですね。
何かよい対処法が無いか僕の方でも調べてみます。
> wu さん
IE6, Fx2, Op9で問題無い版のサンプルをアップしてみました(IE7, Safariではダメです)。
サンプル
divを余分に２つと、ダミーのアンカー(position:absolute;)を追加しています(実際に使用する場合はみえないようにする)。
IE7は、いろいろ試してみましたが、無理そうでした。
ページ内アンカーを設置している場合は、このCSSを使わない方がいいかもしれませんね。
コリスさん
わざわざありがとうございます。
なかなか難しいのですね。
先ほど、私のブログにて、このテクニックに関するコメントを頂きました。
他にも細々とした問題を孕んでいるようです。
無念…。
> wu さん
配布用だと、条件限定ではなく汎用性を高くしないといけないため、これを採用するのは難しいかもしれませんね。
08.02.18 ＨＤＤＶＤ撤退。…
CSS Spriteを活用しよう （designwalker）
ＣＳＳでのロールオーバーでは、使った事ありますけど、なるほど。
高さの異なるカラムを揃えるス (more…)
高さの異なるカラムを揃えるスタイルシート、に絡む諸々の問題
またリニューアル中のページについてですが、テーブルデザインだ、ということは既に書きました。それをMODxに取り込んだのですが、やはりそのままでは我慢できず、テーブルを取り外…
CSS / スタイルシートで高さを合わせる、高さ100%を実現する
スタイルシートのfloatによる段組で、メニューと本文を2段に分けるっていうシチュエーションはよくあると思います。
そのとき、メニューを本文の長さにあわせようとして、スタイルシ…
[css]idでページ内リンクと2段組みの高さ合わせ裏技について
併用すると、ページ内リンクを使ったページのコンテンツ表示が、id属性の及ぶ範囲しか表示されなくなる。 position:absolute の指定があるタグは助かる？ 例えば、 <div class="wrapper clear…
はじめまして。
こちらの方法を試してみたのですが、IEで表示したページを印刷しようとしたところ、「overflow: hidden;」を指定した部分が印刷できなくなるようです。
「overflow: hidden;」はどうしても指定が必要なんですよね?
レイアウトを保持したまま印刷できるとありがたいので、代用できる方法などがあれば良いのですが…
カラムの高さを合わせるのって、なかなかうまい方法が見つからないですね。
> Abdiel さん
IEだと、ダメですね。
情報、ありがとうございます。
このトリックを使用して、IEでプリント対応するとなると、プリント用のスタイルシートを用意するしかなさそうです。
でも、そうなると、そもそも普通に制作した方がよさそうですね。
こんな方法があるんですね☆
ドリームウェーバーで開くと32768pxが表示されてきになりますが、プレビューした時に高さがそろってるのは見た目的に美しいので使わせていただきます！