The main structure of the page is like this:
<html>
<body>
<div id="Menu">
<h1>Menu</h1>
<ul id="MenuList><!-- some LI elements --></ul>
<h1>Submenu 1</h1>
<ul id="Submenu1List"><!-- many LI elements --></ul>
<h1>Submenu 2</h1>
<ul id="Submenu2List"><!-- many LI elements --></ul>
<h1>Submenu 3</h1>
<ul id="Submenu3List"><!-- some more LI elements --></ul>
</div>
<div id="Main"><!-- long content --></div>
</body>
</html>
I use JQuery to make the H1 elements in #Menu clickable so that all the other UL's are rolled up and the UL after the H1 is rolled down. I would like to scroll #Main indepently of the #Menu and I would like scrollbars, if needed, in each UL in #Menu. Here is the relevant CSS:
html { height: 100%; overflow: hidden; font-size: .8em; }
body { height: 100%; overflow: hidden; }
div#Main { position: absolute; right: 0px; top: 0px; bottom: 0px; width: 79.9%; }
div#Menu { position: absolute; left: 0px; top: 0px; bottom: 0px; width: 20%; }
div#Main { overflow: auto; }
div#Menu h1 { font-size: 1.5em; }
div#Menu ul { max-height: 87%; overflow: auto; }
This works exactly the way I want it to. The #Main area is scrollable and each UL, when expanded, gets a scroll bar if there is more content than the containing #Menu DIV can contain.
The only problem is that I have to specify a height of 87% of the containing #Menu DIV, which only works for my combination of screen size, window size and font size. Is there a way to achieve the same effect without hard-coding the height of each UL?
If you like, you can see the page. I would post links to the CSS (/musicdb.css) and the JS code (/musicdb.js), but I'm not allowed. If you want to view source, you can switch content types by adding ?mode=xml or ?mode=html to the URL and view it in IE or Firefox.