javascript - ページ/画面の高さに基づいてサイズ変更

Question

私のページは左右の div に分かれており、右側の div には 2 つを分割する左側の境界線があります。右のボックスの高さが左のボックスよりも大きい場合、正常に機能します。ただし、左ボックスの高さがそれ以上の場合、境界線は半分しかありません。

境界線が最後まで続くように、画面全体の高さに基づいて右のボックスの高さを変更するにはどうすればよいですか。

Answer 1

右のdivに高さを指定できます。そうでない場合は、（jQueryで）ID（rightDivなど）を配置します。

$('#rightDiv').height($(window).height());

ドキュメント全体の高さを使用する場合は、次のようにします。

$('#rightDiv').height($(document).height());

$(window).height()使用可能なブラウザウィンドウの高さを再実行します。

$(document).height()ドキュメントの高さを再実行します。

または、比較することができます：

var doc = $(document);
var win = $(window);
var maxHeight =  doc.height() > win.height() ? doc.height() : win.height() ;
$('#rightDiv').height(maxHeight);

あなたは最小の高さを持っています、あなたが試すことができるアニメーションの高さのために：

$('#rightDiv').animate( { height : maxHeight}, <duration>);

<duration>オプションです。ここで「遅い」、「速い」、ミリ秒を指定できます

Answer 2

別の解決策は、この純粋な CSS のものです: http://jsfiddle.net/zgMv5/
左と右の div を別の div の周りに置き、<div>それを CSS テーブル行として使用します。すると、2つが<div>同じ高さになります。

<div id="outer">
  <div id="left">This is some text.</div>
  <div id="right">This is some text.</div>
</div>

対応する CSS は次のようになります。

div#outer {
    display:table-row;  }
div#outer > div {
    display:table-cell;  }
div#left  {
    border-right:1px solid red;  }

古いブラウザとの互換性についてはわかりません...