JavaScript - Get Browser Height

Question

I am looking for a code snippet to get the height of the viewable area within a browser window   I had this code  however it is somewhat bugged as if the the body doesn t exceed the height the of the window then it comes back short   document body clientHeight    I have tried a couple of other things but they either return NaN or the same height as the above   Does anyone know how to get the real height of the browsing window

User · Answer

You ll want something like this  taken from http   www howtocreate co uk tutorials javascript browserwindow  function alertSize       var myWidth   0  myHeight   0    if  typeof  window innerWidth       number            Non-IE     myWidth   window innerWidth      myHeight   window innerHeight      else if  document documentElement  amp  amp    document documentElement clientWidth    document documentElement clientHeight             IE 6  in  standards compliant mode      myWidth   document documentElement clientWidth      myHeight   document documentElement clientHeight      else if  document body  amp  amp    document body clientWidth    document body clientHeight             IE 4 compatible     myWidth   document body clientWidth      myHeight   document body clientHeight        window alert   Width       myWidth      window alert   Height       myHeight        So that s innerHeight for modern browsers  documentElement clientHeight for IE  body clientHeight for deprecated quirks

User · Answer

Try using jquery   window size     window  height

User · Answer

I prefer the way I just figured out    No JS    100  HTML  amp  CSS    Will center it perfectly in the middle  regardless of the content size   HTML FILE   lt html gt  lt head gt   lt link href  jane css  rel  stylesheet    gt   lt  head gt   lt body gt   lt table id  container  gt   lt tr gt   lt td id  centerpiece  gt  123  lt  td gt  lt  tr gt  lt  table gt   lt  body gt  lt  html gt    CSS FILE   container      border 0      width 100       height 100      centerpiece      vertical-align middle      text-align center      for centering images   div s held within the td  you may wish to try margin auto  and specify a div dimension instead  -Though  saying that    the  text-align  property will align much more than just a simple text element

User · Answer

There s a simpler way than a whole bunch of if statements  Use the or      operator   function getBrowserDimensions       return       width   window innerWidth    document documentElement clientWidth    document body clientWidth       height   window innerHeight    document documentElement clientHeight    document body clientHeight          var browser dims   getBrowserDimensions     alert  Width       browser dims width     nHeight       browser dims height

User · Answer

You can use the window innerHeight

User · Answer

This should works too  First create an absolute  lt div gt  element with absolute position and 100  height    lt div id  h  style  position absolute top 0 bottom 0   gt  lt  div gt    Then  get the window height from that element via offsetHeight  var winHeight   document getElementById  h   offsetHeight      Update   function getBrowserSize         var div   document createElement  div        div style position    absolute       div style top   0      div style left   0      div style width    100        div style height    100        document documentElement appendChild div       var results             width  div offsetWidth          height  div offsetHeight            div parentNode removeChild div      remove the  div      return results     console log getBrowserSize

User · Answer

The way that I like to do it is like this with a ternary assignment    var width   isNaN window innerWidth    window clientWidth   window innerWidth   var height   isNaN window innerHeight    window clientHeight   window innerHeight    I might point out that  if you run this in the global context that from that point on you could use window height and window width   Works on IE and other browsers as far as I know  I have only tested it on IE11    Super clean and  if I am not mistaken  efficient

User · Answer

var winWidth   window screen width  var winHeight   window screen height   document write winWidth  winHeight

User · Answer

With JQuery you can try this   window  innerHeight    Works for me on Chrome  FF and IE   With bootstrap modal I used something like the following       YourModal   on  show bs modal   function              modal-body   css  height     window  innerHeight     0 7

User · Answer

JavaScript version in case if jQuery is not an option   window screen availHeight

[javascript] JavaScript - Get Browser Height

Examples related to javascript

Examples related to window

Examples related to height