Resize div element browser resize

by Andy
Posted on May 31, 2013July 29, 2020

I wanted to have a site that was a little bit more responsive than just the width of things changing. I wanted the body div to resize to match the screen of the user. What I found was this was actually pretty simple to do. I am not a javascript expert and I am still learning the language so if there is another way please let me know.

Here is the code:

function autoResize() {
var height = $(window).height();
document.getElementById(&quot;body&quot;).style.height = height - 233 + &quot;px&quot;;
}

window.onresize = autoResize;
autoResize();

function autoResize() {

var height = $(window).height();

document.getElementById("body").style.height = height - 233 + "px";

}

window.onresize = autoResize;

autoResize();

Just add this to your js file and site will resize div element browser resize of your html automatically when the user changes the browser size. No jQuery, just simple javascript.

Disclaimer: Obviously you will need to change the amount that is subtracted from the height to fit your sits styles.

UPDATE:

With the advent of CSS3 this is pretty much obsolete. You can accomplish the same effect using the “section” tag. like this:

section {height:90vh}

1	section {height:90vh}

The “vh” is a viewport height and 90vh equals 90% of the viewport height. The “vh” unit is a useful tool to have in your tool bag of tricks. This little item has saved me countless hours of Javascript to re-size a div when the window re-sizes. Browsers continue to advance and get better every day.

[AdSense-A]