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

Resize based on page/screen height

本文关键字：高度 调整 屏幕      更新时间：2024-02-07

我的页面分为左div和右div，右div有一个边界，将两者向左分割。如果右框的高度大于左框的高度，则效果良好。但是，如果左侧框的高度更大，则边界仅为一半。

如何根据整个屏幕的高度调整右框的高度，使边框一直延伸到最后。

您可以为右侧div提供高度，如果没有，请在那里放置id（如rightDiv）（在jQuery中）。

$('#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>是可选的，您可以在此处提供"慢速"、"快速"、毫秒

另一个解决方案是这个纯CSS解决方案：http://jsfiddle.net/zgMv5/
在左右两边放置另一个<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;  }

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

相关文章：