Setting the height of a DIV dynamically

Question

In a web application  I have a page that contains a DIV that has an auto-width depending on the width of the browser window   I need an auto-height for the object   The DIV starts about 300px from the top screen  and its height should make it stretch to the bottom of the browser screen   I have a max height for the container DIV  so there would have to be minimum-height for the div   I believe I can just restrict that in CSS  and use Javascript to handle the resizing of the DIV   My javascript isn t nearly as good as it should be   Is there an easy script I could write that would do this for me   Edit   The DIV houses a control that does it s own overflow handling  implements its own scroll bar

User · Answer

With minor corrections   function rearrange     var windowHeight   if  typeof window innerWidth     undefined         windowHeight   window innerHeight       IE6 in standards compliant mode  i e  with a valid doctype as the first    line in the document  else if  typeof document documentElement     undefined           amp  amp  typeof document documentElement clientWidth     undefined           amp  amp  document documentElement clientWidth    0        windowHeight   document documentElement clientHeight       older versions of IE else       windowHeight   document getElementsByTagName  body   0  clientHeight     document getElementById  foobar   style height    windowHeight - document getElementById  foobar   offsetTop  - 6    px

User · Answer

document getElementById  myDiv   style height   500   This is the very basic JS code required to adjust the height of your object dynamically   I just did this very thing where I had some auto height property  but when I add some content via XMLHttpRequest I needed to resize my parent div and this offsetheight property did the trick in IE6 7 and FF3

User · Answer

Try this simple  specific function   function resizeElementHeight element      var height   0    var body   window document body    if  window innerHeight          height   window innerHeight      else if  body parentElement clientHeight          height   body parentElement clientHeight      else if  body  amp  amp  body clientHeight          height   body clientHeight        element style height     height - element offsetTop     px        It does not depend on the current distance from the top of the body being specified  in case your 300px changes      EDIT  By the way  you would want to call this on that div every time the user changed the browser s size  so you would need to wire up the event handler for that  of course

User · Answer

If I understand what you re asking  this should do the trick      the more standards compliant browsers  mozilla netscape opera IE7  use     window innerWidth and window innerHeight  var windowHeight   if  typeof window innerWidth     undefined         windowHeight   window innerHeight       IE6 in standards compliant mode  i e  with a valid doctype as the first     line in the document  else if  typeof document documentElement     undefined           amp  amp  typeof document documentElement clientWidth     undefined            amp  amp  document documentElement clientWidth    0        windowHeight   document documentElement clientHeight       older versions of IE else       windowHeight   document getElementsByTagName  body   0  clientHeight     document getElementById  yourDiv   height   windowHeight - 300    px

User · Answer

What should happen in the case of overflow   If you want it to just get to the bottom of the window  use absolute positioning   div     position  absolute    top  300px    bottom  0px    left  30px    right  30px      This will put the DIV 30px in from each side  300px from the top of the screen  and flush with the bottom   Add an overflow auto  to handle cases where the content is larger than the div   Edit   Whoever marked this down  an explanation would be nice    Is something wrong with the answer

User · Answer

Simplest I could come up     function resizeResizeableHeight             resizableHeight   each  function               this  outerHeight    this  parent   height   -     this  offset   top -     this  parent   offset   top   parseInt    this  parent   css  padding-top                       Now all you have to do is add the resizableHeight class to everything you want to autosize  to it s parent

User · Answer

inspired by  jason-bunting  same thing for either height or width   function resizeElementDimension element  doHeight      dim    doHeight    Height     Width     ref    doHeight    Top     Left      var x   0    var body   window document body    if window  inner    dim       x   window  inner    dim    else if  body parentElement  client    dim       x   body parentElement  client    dim    else if  body  amp  amp  body  client    dim       x   body  client    dim     element style dim toLowerCase        x - element  offset    ref      px

[javascript] Setting the height of a DIV dynamically

Examples related to javascript

Examples related to html

Examples related to css