根据页面/屏幕高度调整大小(Resize based on page/screen height)

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

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

My page is divided into left and right divs, the right div has a border left partitioning the two. if the height of the right box is bigger then left, it works fine. However if the left box height is more, then the border is only halfway.

How can i resize the height of the right box based on the height of entire screen so that the border runs all the way to the end.

最满意答案

你可以为你的右边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>是可选的,你可以在这里提供'慢','快',毫秒

You can provide height to your right div like, place a id ( like rightDiv ) there if not (in jQuery).

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

if you want to height of your entire document use:

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

$(window).height() will retrun available browser window height.

$(document).height() will retrun document height.

or you can make a comparison:

var doc = $(document); var win = $(window); var maxHeight = doc.height() > win.height() ? doc.height() : win.height() ; $('#rightDiv').height(maxHeight);

You have min-height, for animate height you can try:

$('#rightDiv').animate( { height : maxHeight}, <duration>);

<duration> is optional, you can provide here 'slow', 'fast', miliseconds

更多推荐