基于页面/屏幕高度调整大小
问题描述:
我的页面分为左右两个div,右侧div有一个左侧分隔两个的边框。如果右边框的高度较大,那么它就可以正常工作。但是,如果左侧框高度更高,那么边框只有一半。基于页面/屏幕高度调整大小
如何根据整个屏幕的高度调整右侧框的高度,以便边框一直运行到最后。
答
你可以为你的正确的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>
是可选的,你可以在这里提供“慢”, '快',毫秒
答
另一种解决方案将是这个纯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; }
我不知道旧的浏览器兼容性...
答案更新:这是我用来 VAR DOC = $(文件); var win = $(window); ()#()#$('#rightBox')。css('min-height',(doc.height()> win.height())?doc.height() - 100:win.height() - 100) – Dru 2012-07-24 12:26:54