0

I'm using a jQuery UI accordion as a menu on the right side of a page. However, there are occasions where the menu will be taller than the content on the left. Because of this, when expanding/contracting sections of the accordion, the scrollbar on the browser can grow/shrink when opening a section of the accordion. My thought was to have a div below the accordion which is the height that the accordion could possibly get to, and when the accordion expands it would just overlap it, thus not changing the scrollbar on the browser at all (hope that makes sense). Giving it a position: absolute and declaring the height and width seems to screw up the layout, placing it overlapping the footer but bleeding below it. Anyone have any ideas on how to make this work? If you need a more detailed example, I'll see what I can do to provide it, however, the site is locked down and I can't give out a username/password.

David Savage
  • 1,562
  • 2
  • 18
  • 35

2 Answers2

1

Min-height is easy to implement in IE 6. The oldest hack from Dustin Diaz:

selector {
    min-height:500px;
    height:auto!important;
    height:500px;
}

Or with expressions:

selector {
    height:expression( this.scrollHeight < 499 ? "500px" : "auto" ); 
}

In fact for IE 6 height is like min-height. Element will expand with the content in it, until there is overflow:hidden specified..

You can always apply rules for IE 6 only with "* html hack" or with Conditional Comments.

Flack
  • 5,862
  • 2
  • 23
  • 27
0

You probably have a container around the menu and the content right? You could add a css min-height to the container which would be equal to the tallest that the menu could be in height

Mark Steggles
  • 5,369
  • 8
  • 40
  • 50
  • I thought about that option as well. However, this site has to support IE6-8 along with Firefox and Safari, and I know at least IE6 doesn't support a min-height attribute. If you know of a way to acheive that result in those browsers I'm definitely for that solution. – David Savage Dec 14 '10 at 20:11
  • You can emulate min-height in ie6 with the 'min height fast hack'.. see http://www.dustindiaz.com/min-height-fast-hack/ selector { min-height:500px; height:auto !important; height:500px; } – Mark Steggles Dec 15 '10 at 14:23