Results 1 to 4 of 4

Thread: How to resize the DIV's Height?

  1. #1
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to resize the DIV's Height?

    Hello all!
    I have a problem,that is how to resize the DIV's Height by JavaScript.
    I can't use the event of resize,resizeTo,resizeBy or onResize,because they are'nt used to the DIV tag.
    HELP!!!

    I extremely sorry for my express in english!
    My means that I want to resize the DIV's Height automatically when the user changed the Browser's size.

    DETAILS:
    I have 3 DIV's in my page,the size of the two of the above was fixed.
    My problem is that I want the third DIV's Height automatically resizable with user's drop and drag to the Browser.

    Now the third DIV's Height was fixed.Between the bottom of the third DIV and the Browser have a blank. I'd like to erase this blank,and hope to third DIV's bottom near to the Browser's Status's bar.

    clientHeight - DIV1's height - DIV2' height??

    any suggestion please!


    2006.09.28
    Last edited by guryu; 09-28-2006 at 04:59 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, you can use the onresize event for the page to determine when to make adjustments to any individual element on a page.

    clientHeight is IE specific and must be used as either document.body.clientHeight or document.documentElement.clientHeight if the inner height of the browser window is desired, the alternative used by other modern browsers is:

    window.innerHeight

    This function helps to determine how to know whether to use body or documentElement in IE:

    Code:
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }
    So you could do something like so, with the above function available:

    Code:
    onresize=function(){
    var docy=window.innerHeight? window.innerHeight : iecompattest().clientHeight;
    div3.style.height=docy-div1.offsetHeight-div2.offsetHeight+'px';
    }
    But, you could end up with zero or a negative number.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I am very thanks for your anwser,but it not work in IE automatically untile you manually to refresh the Browser !

    But great thanks for your HELP!

    Your idea is so good !

    guryu
    2006.09.28

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If done correctly, this should work. Sometimes the style or attributes of other elements on the page can interfere with this type of approach. If you can provide a link to a demo of what you've done, I should be able to work out what the problem is.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •