Resize inner DIV to fill up outer DIVs height in IE 6

Discussion in 'Javascript' started by, Aug 14, 2007.

  1. Guest


    please take a look at

    When the window is resized, the JavaScript does two things:
    - adjust the height of the DIV that contains the treeview
    - adjust the size of the image on the right side

    In IE 6, neither of that is done correct. My initial problem was to
    tell IE 6 in CSS that the left column DIV (#left) should span over the
    whole height of the window. I did that with "position: absolute; top:
    0; bottom: 0;"

    But I learned that that's not possible in IE 6, and that I instead
    should use
    * html body {
    height: 100%;

    * html body #left {
    height: 100% !important;

    The height of the treeview, in order to fill up the remaining space,
    is the height of the outer DIV minus the height of the "toolbar", and
    optional the height of a search form that is toggled on and off with
    the magnifying glass on the toolbar.

    The resizing code:
    function resizeTree() {
    leftEl = getElById('left');
    if (leftEl == null) return;
    toolbarEl = getElById('toolbar');
    if (toolbarEl == null) return;
    searchEl = getElById('search');
    if (searchEl == null) return;
    treeEl = getElById('tree');
    if (treeEl == null) return;
    newHeight = leftEl.offsetHeight - toolbarEl.offsetHeight -
    searchEl.offsetHeight; = newHeight + 'px';

    This works in Firefox and IE 7. In IE 6 the following happens:
    - After initially loading the page, the size of the tree is correctly
    - When increasing the height of the window, the size is adjusted as
    - When decreasing the window height, the tree is not adjusted. The
    leftEl.offsetHeight always contains the maximum height it has ever
    reached. It won't be decreased if you decrease the windows height
    again, it only gets bigger as soon as you increase the height over the
    last maximum value.
    - When I toggle on the searchform, the height of the #left div
    increases as well, and the tree is pushed down in order to give space
    for the search form, but the tree's height is not adjusted. Or better:
    It seems to be adjusted, but the #left div's height is just too big.

    Please forgive me if this is a CSS issue and I am wrong here, but
    maybe somebody has an idea how to correct this in JavaScript.

    Best regards,

    Christian Kirchhoff
    , Aug 14, 2007
    1. Advertisements

  2. rf

    rf Guest

    <> wrote in message
    > Hallo,
    > please take a look at

    Seven hundred and fourty eight kilobytes for that tiny simple page? Crikey!

    createtree.js: 249KB? Way too much time on your hands :) Oh, I see, the
    stuff on the left. Is that supposed to be "navigation"?

    S01--whatever.png: 391KB? Compress it. Now. It should be at most 30K. And is
    this the intro page to your site? Plus, I did not actually see this image
    until the second time I viewed the page. Or refreshed it. And why resize it
    anyway? The browser canvas area should not be one of your concerns.

    Self styled "frames". Nasty IMHO. Worse than the real ones.

    And all of this is done in that huge javascript file I suppose? View source
    reveals not a lot of stuff.

    Bin the lot. Learn some HTML, CSS and use javascript for the simple eye
    candy stuff.

    rf, Aug 14, 2007
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SM
    Andrew Morton
    Nov 26, 2009
  2. Mc Lauren Series
    Feb 13, 2010
  3. SM

    IE 7.0 - Outer div height issue

    SM, Nov 25, 2009, in forum: ASP General
  4. ShutterMan
    David Mark
    Dec 1, 2008
  5. Tom Y
    Jul 12, 2011

Share This Page