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”>
$(document).ready(function(){
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.
});
</script>
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 !
