基於頁面/屏幕高度調整大小

Question

我的頁面分爲左右兩個div，右側div有一個左側分隔兩個的邊框。如果右邊框的高度較大，那麼它就可以正常工作。但是，如果左側框高度更高，那麼邊框只有一半。

如何根據整個屏幕的高度調整右側框的高度，以便邊框一直運行到最後。

Answer 1

你可以爲你的正確的div提供高度，如果沒有（在jQuery中）放置一個id（如rightDiv）。

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

，如果你想你的整個文檔使用的高度：

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

$(window).height()將retrun可用的瀏覽器窗口的高度。

$(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/
你放在第e左側和右側div另一<div>並將其用作CSS表格行。那麼包含<div>的2將是相同的高度。

<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; } 

我不知道舊的瀏覽器兼容性...