如何使用javascript或jquery在浏览器窗口中调整div的大小

Question

是否可以使用JavaScript或jQuery在浏览器窗口中调整div高度的大小，以获取Windows对象尺寸并创建函数？

Answer 1

You can bind to the resize event to well... re-size your element:

//bind event handler to the `resize` event
$(window).on('resize', function () {

    //cache the window object for use in this function
    var $this = $(this);

    //set the height of my object to the height of the window
    $('#my-object').height($this.height());

//trigger a window resize to initialize the object's height
}).trigger('resize');

$this refers to the window object.

Note that .on() is new in jQuery 1.7 and replaces the depreciated .bind() in this instance.

Answer 2

Here is a crossbrowser solution:

DEMO

I divided the result by 'two' to make the effect more visible at window resize:

$.getDocHeight = function(){
  var D = document;
  return Math.max(Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
};

$('#box').height($.getDocHeight()/2 );

$(window).resize(function(){
  $('#box').height($.getDocHeight()/2 );
});

You can just use:

$('#box').height($.getDocHeight);

Hope this helps - Happy coding!