Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Setting Element Height Dynamically

DZone's Guide to

Setting Element Height Dynamically

·
Free Resource
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.  

 An example of the snippet in action


  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;
Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}