HTML、CSS、jQuery - 別の列のdivの高さに応じて1列のdivの高さ

次の問題があります。HTML、CSS、jQuery - 別の列のdivの高さに応じて1列のdivの高さ

<html> 
<body> 
<div id="leftColumn"> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div id="div3"></div> 
    <div id="div4"></div> 
</div> 
<div id="rightColumn"> 
    <div id="div1sidebar"></div> 
    <div id="div2sidebar"></div> 
    <div id="div3sidebar"></div> 
    <div id="div4sidebar"></div> 
</div>  
</body> 
</html>

左の欄のdivの高さは、その内容によって異なります。右の列のdivが左の列のdivと同じ高さになるようにしたいです - "div1"の高さは "div1"、 "div2sidebar"は "div2"などに依存します。

CSSだけでそれを達成する方法は？あるいは、例えばjQueryを使って？ "Faux columns"メソッド（http://www.alistapart.com/articles/fauxcolumns/）は、親の背景ではなく、div自体の高さのためオプションではありません。

EDIT：左の列のdivの高さは、サイトをリロードせずに「オンザフライ」に変更されます。

出典

2011-11-07 Irminsul

あなたはfloatあなたの要素は左と右との使用は、彼らがここでのように、整列するために取得するためにclear: both繰り返すことができます：http://jsfiddle.net/eNRhQ/2/

これは、対応するdiv要素が常に合っていることを保証していますが、国境で見ることができるよう、彼らの実際には高さは同じではありません。（あなたはスタイリングの目的のために、この唯一の可能な必要性は可能性が...）

あなたが本当にプログラムで、あなたのdivを揃えたい場合、あなたはjQueryのでは、このようにそれを行うことができます。

var left = $('#left-element'); 
var right = $('#right-element'); 

var maxHeight = Math.max(left.height(), right.height()); 

left.height(maxHeight); 
right.height(maxHeight);

しかし、私はそのことを確認しますこのページはJavascriptなしでもOKです。

出典

2011-11-07 18:06:25 wutz

うーん、あなたに感謝を助けてください、しかし、そのjsfiddleの例では、htmlは少し異なります - 私はこのように変更することはできません。私の場合、左のdivはすべて左の列の1つになければならず、右のdivはすべて右の列になければなりません。しかし、とにかく、私はそれをしました： '$（"＃div1sidebar "）css（{高さ：$（"＃div1 "）。高さ（）}）; ' でも、動的リサイズにはまだ問題があります。なぜこのコードが機能しないのですか？ - '$（ "＃1 DIV1"）リサイズ（関数（）{ \t \t \t $（ "＃1 div1sidebar"）、CSS（{高さ：。。。$（ "＃1 DIV1"）の高さ（）}）; \t \t}）; ' – Irminsul

これはCSSで実行できない奇妙なものの1つです。

あなたは、これはリサイズ後の日付まで滞在したい場合は、あなたが行うことができます私はこのプラグインを使用し、それは素晴らしい作品、 http://www.cssnewbie.com/equalheights-jquery-plugin/

：

$(".columns").resize(function(){ 
    $(".columns").equalHeights(); 
});

http://api.jquery.com/resize/

出典

2011-11-07 19:05:49 CambridgeMike

有望です。私に教えてください - 1つのdivの動的リサイズでもそれを使用する方法はありますか？ – Irminsul

もちろん、サイズ変更ハンドラから呼び出すこともできます。編集を参照してください – CambridgeMike

私はそれがうまくいかないと思っています。 divのサイズを変更しても、高さが変わることはありません。 – Irminsul

HTML、CSS、jQuery - 別の列のdivの高さに応じて1列のdivの高さ

答えて

関連する問題