floatで二段組みにした左右コラムの高さをjQueryで後から強引にそろえる
いかさまです。
本当は最初に組むときにしっかり考えれば必要のないことなのですが、あとからデザインが変わったときに既に組んでしまったHTMLを変えずに、CSSの微調整だけでは直せないことがあります。
HTML側も変えるとなると、既に別行程(プログラマのPHP組込)などに移っているものも戻してもらわないといけないので、場合によってはちょっと面倒だったりします。
今回起こったのは、もともとサブメニューとメインコンテンツの二段組みにしていたコンテンツで、左右の高さはそれぞれの成り行きになるように組んでいた。
ところがデザインの関係上、メインコンテンツ側の縦幅がサブメニューの縦幅より小さいときにはサブメニューの縦幅分の高さは確保したい、というもの。
jQueryのhight()で高さを取得できるので、それを使って以下のように解決。
これで、mainの縦幅が小さいときは、sideに自動的に合います。
ページがロードされてから実行されるため、一瞬、本来の高さでmainが表示され、すぐにsideの高さまで広がります。
全体に読み込ませているjsファイルに5行仕込んで終了。らくちん。
でもまぁ、こんな事やらないに越したことはないですけどね。
本当は最初に組むときにしっかり考えれば必要のないことなのですが、あとからデザインが変わったときに既に組んでしまったHTMLを変えずに、CSSの微調整だけでは直せないことがあります。
HTML側も変えるとなると、既に別行程(プログラマのPHP組込)などに移っているものも戻してもらわないといけないので、場合によってはちょっと面倒だったりします。
今回起こったのは、もともとサブメニューとメインコンテンツの二段組みにしていたコンテンツで、左右の高さはそれぞれの成り行きになるように組んでいた。
ところがデザインの関係上、メインコンテンツ側の縦幅がサブメニューの縦幅より小さいときにはサブメニューの縦幅分の高さは確保したい、というもの。
jQueryのhight()で高さを取得できるので、それを使って以下のように解決。
var mainHeight = ($("#main").height()); var sideHeight = ($("#side").height()); if (sideHeight > mainHeight ){ ($("#main").height(side)); }
これで、mainの縦幅が小さいときは、sideに自動的に合います。
ページがロードされてから実行されるため、一瞬、本来の高さでmainが表示され、すぐにsideの高さまで広がります。
全体に読み込ませているjsファイルに5行仕込んで終了。らくちん。
でもまぁ、こんな事やらないに越したことはないですけどね。
コメント