Question

我的页面分为左右div，右边的div有两个分隔的边框。如果右侧框的高度大于左侧，则可以正常工作。但是，如果左框高度较大，则边框仅为中途。

如何根据整个屏幕的高度调整右侧框的高度，以便边框一直运行到最后。

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>并将它用作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;  }

我不确定与旧浏览器的兼容性......

根据页面/屏幕高度调整大小

2 个答案: