基于页面/屏幕高度调整大小

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

我不知道旧的浏览器兼容性...