Change DIV height/width with body width/height using jQuery

Hello Friends !!

SInce last few dyas, I am facing the problem that how can I change DIV height/width with body or browser height/width ? I want that DIV heoght is increase when browser heignt increase and decrease when browser height decrease.

In short I wnat my DIV size browser friendly. For this, I search many things in google and finally I found the solution by jQuery. In this post, I will give you code that how to change your DIV height/width with browser height/width veries.

First download latest jQuery file. After this make one DIV for which you want to change the height/width.

<div id=”test” style=”background-color:#000;”></div>

In above DIV, i give background color black so you can see the change. Now write below code in you head section.I am giveng you some code whcih use for this.

$(window).width(); => It returns width of the body

$(document).width(); => It returns width of the whole window

$(window).height(); => It returns height of the body

$(document).height(); => It returns height of the whole window

Now for an example you want the div height same as your body

then use below code. First make one div like

<div id=”test” style=”background-color:#000;”></div> I set blacj background color because you can see the change.

Suppose in your web page, there is one header which height is 100px and you want the above div height after header. So follow below code. Put this code in head section.

Thats it. You can also use span tag instead of div. You can set your DIV height/width as page resize. If you have any confusion or query about this than comment on this.

Thanks You !