comments 2

Resize div element browser resize

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:

 

 

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:

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.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *