ｊsでメインとサブのHTML高さを揃える!!

質問

先ほどこちらで質問したのですが、
cssでfloatを使用してサブ(左)とメイン(右)を作成した場合に、
どちらか長い方にボトムを揃えるやり方を、
<script type="text/javascript" src="./heightLine.js"></script>
を使用して解決しました。

しかし、html内にオンマウスで画像や文字を変更させるものがあると、
サブとメインのボトムがずれてしまいます…
これはどうにもならないのでしょうか？

おわかりになられる方、ご教授下さい。
よろしくお願いしますm(_ _)m

回答No.2

abril

> cssでfloatを使用してサブ(左)とメイン(右)を作成した場合に、どちらか長い方にボトムを揃える

質問の直接の解決にはならないのですが、そのJavaScriptを併用することで他のスクリプト部分に影響が出てしまうぐらいなら、段組の見栄えの問題に関してはCSSにまかせてしまった方が楽な様に思えます。やり方はいくつかありますが、よくあるパターンを2つほど。
(1)実際のソースは下記をご覧下さい。
http://css-happylife.com/log/css-template/000174.shtml
http://coliss.com/articles/build-websites/operation/css/558.html
上記の各コンテンツで挙げられているサンプルの考え方はどちらも同じです。この方法の利点は、右コラムと左コラムをさらに囲む様な外枠のコラムを使わなくても左右の「高さが常に揃っている様に見える」事ですが、前者の筆者の方などは「ブラウザの負荷」等の可能性に対する懸念も述べられています。5桁というそれこそ桁違いの余白とネガティブ・マージンを同時に指定して"overflow: hidden;"で断ち切るというかなり力業な方法論なので。
(2)上記でもちょっと書きましたが右コラムと左コラムを囲む親のブロックに右コラムと左コラムの背景をひとまとめにした背景画像を水平方向にリピートしてレンダリングさせるやり方とか。こちらも、背景をレンダリングしているのは親要素なので右左どちらのコラムの高さが高かろうが低かろうが、常にそれぞれのコラムの領域が「同じ長さまである様に見え」ます。
ただしこちらは入れ子構造が1つ増えるという事（構造によってはその限りでもない場合もありますが）や、左右それぞれの背景が単なる「背景色」で済む様な場合でも「背景画像」を作ってやらなければならない、という欠点もあります。

とはいえどちらのやり方も文法的に間違ってるとかではないので、もしご自身で納得できるものがあればご使用を検討されてみては。

回答No.1

yambejp

どうしてもというなら、テーブルで処理するくらいでしょうか・・・
お勧めはしませんが、jsでこねくりますよりはましでしょう