css: 2008年4月アーカイブ
前に書いた「heightLine.js」がなぜかIEとOperaで上手くいきませんでした…。
ということで違う方法を探したらミラクルなCSSでの実現方法が載っていました♪
外枠のdivの中に高さをそろえたいdivを入れてあげます。
中に入れた二つのdivのpadding-bottomを最大限に伸ばしてあげます。
そしてネガティブマージンで相殺してあげます。
外枠のdivにはみ出た部分の表示を見せないように指定してあげます。
CSSはこんな感じにしました。
#line_suppo {
overflow: hidden;
}
#content , #aside {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
なんと高さが揃うではありませんかっヾ(＠⌒▽⌒＠)ノワーイ!
スタイルシートはネガティブマージンを使うと
デザインの幅がかなり広がります。
これはミラクル！という使い方をご存知の人はぜひ教えて下さいね(*・人・*)
※ネガティブマージンとは：marginにマイナス値を設定すること。
参考サイト：CSS-EBLOG
ようやく会社のホームページのリニューアルが終盤を迎えました。
試行錯誤、何から何まで手探りです。
今日はCSSで段組をしているdiv(ブロック要素)の高さを揃えるというお題が出てきました。
CSSだけでは上手に行かず、「heightLine.js」を使いました。
対象のdivに「class="heightLine"」を指定してあげるといいとか。
が、全ページに埋め込む作業はメンドクサイ…。
と思いつつも悩んでいる時間がないので、マンパワーで頑張ります！
