DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Roy has posted 10 posts at DZone. View Full User Profile

Setting Element Height Dynamically

03.26.2007
| 10011 views |
  • submit to reddit
        There are times when you need to control the height of an element based on the screen size. However youcan control the user setup, and of course there are browser differences so this snippet handles browser and object detection and sets the height during page load and for any re-sizing event.  

<a href="http://www.expertsrt.com/scripts/Cd/dynamic_hgt_div.html"> An example of the snippet in action</a>

  var minorOffset = (document.all)? 25 : 38;
   function setHgt()
   {
      var sHGT;
      srcobj=document.getElementById('main');
      if (self.innerHeight)
      {
	   sHGT = self.innerHeight;
	}
      else
      { 
         if (document.documentElement && document.documentElement.clientHeight)
         {
	      sHGT = document.documentElement.clientHeight;
         }
         else
         {
            if (document.body)
            {
              sHGT = document.body.clientHeight;
            }
         }
      }
      sHGT=sHGT-(document.getElementById('main').offsetTop+minorOffset);
  document.getElementById('main').style.height=sHGT+"px";
   }
window.onload=setHgt;
window.onresize=setHgt;