Apr 22, 2010

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.

<script language=”javascript”>


var height1 = $(document).height(); // height of full document

var height2 = $(“#header”).height(); // height of header

var height_diff = height1 – height2 + “px”;

document.getElementById(‘test’).style.height = height_diff; // Set the remaining height in test DIV.



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 !

Support to grow

If you think my post is helps you then please make donation and do support to grow:

PHP Genious Services

I am a PHP freelancer india, PHP Developer india, PHP programmer india, Wordpress Freelancer india, Wordpress customization services, Wordpress Plugin Developer, Wordpress theme customization, Wordpress plugin customization, Magento Freelancer, Magento Developer india, Magento customization services, Magento theme integration, Opencart Developer india, Zencart Freelancer, Opencart customization, Opencart plugin development, HTML and CSS customization, cakePHP Developer, cakePHP Freelancer india, Ecommerce Developer india

Click Here for

Follow me on Facebook


Get Adobe Flash player