SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Taiwan
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get the available height in the browser?

    As shown in the following figure. How do I get the height?



  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    var viewportheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Taiwan
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    var viewportheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    Thank you.

    I was using $('html').height() of jQuery but it didn't work. Strange.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by IanYang View Post
    Thank you.

    I was using $('html').height() of jQuery but it didn't work. Strange.
    That would be trying to get the height of the content of the HTML tag rather than the height of the browser viewport.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Taiwan
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    That would be trying to get the height of the content of the HTML tag rather than the height of the browser viewport.
    But in XHTML, isn't the documentElement always the <html> element?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    The height of the page is completely different from the height of the browser viewport. The height of the browser viewport is the same regardless of whether a page is 10 pixels or 10 million pixels long. A short page will have a blank space at the bottom of the viewport. A long page will either have a scrollbar to allow the page to scroll or will have whatever doesn't fit the viewport inaccessible.

    documentElement.clientHeight only supplies the viewport height in IE when a strict doctype is used.

    Iin XHTML the viewport height is always supplied by window.innerHeight and the other two alternatives are not needed (as they are only used by IE which doesn't support XHTML).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,895
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    In jQuery it's $(window).height()
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Taiwan
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The height of the page is completely different from the height of the browser viewport. The height of the browser viewport is the same regardless of whether a page is 10 pixels or 10 million pixels long. A short page will have a blank space at the bottom of the viewport. A long page will either have a scrollbar to allow the page to scroll or will have whatever doesn't fit the viewport inaccessible.

    documentElement.clientHeight only supplies the viewport height in IE when a strict doctype is used.

    Iin XHTML the viewport height is always supplied by window.innerHeight and the other two alternatives are not needed (as they are only used by IE which doesn't support XHTML).
    I see.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Location
    Taiwan
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    In jQuery it's $(window).height()
    Thank you!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •