用CSS创建菜单并溢出：auto
该页面的主要结构如下所示：
<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>
我使用JQuery将#Menu中的H1元素设置为可点击的，以便所有其他UL都汇总起来，H1之后的UL滚动。 我想滚动＃主要是#Menu，如果需要，我希望在#Menu的每个UL中都有滚动条。 这里是相关的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; }
这完全按照我想要的方式工作。 #Main区域是可滚动的，并且每个UL展开时，如果存在比包含的#Menu DIV可包含的内容更多的内容，则获得滚动条。
唯一的问题是我必须指定包含#Menu DIV的87％的高度，它只适用于我的屏幕大小，窗口大小和字体大小的组合。 没有硬编码每个UL的高度，是否有办法达到相同的效果？
如果你喜欢，你可以看到页面。 我会发布链接到CSS（/musicdb.css）和JS代码（/musicdb.js），但我不允许。 如果您想查看源代码，可以通过将？mode = xml或？mode = html添加到URL中来切换内容类型，并在IE或Firefox中查看它。
我正在用Firebug玩你的网站页面。 除了这个之外，真的不可能有真正快捷的解决方案：
将“div＃Menu”设置为100％，将“div＃Menu H1”设置为百分比为5％的高度。
你有“菜单”，“艺术家”，“标签”和“格式”= 4 h1项目。 这是5 X 4 = 20％。
将“div＃Menu ul”设置为100-20 = 80％。
玩数字，并调整垂直对齐，你应该很好去。 不足之处在于，您无法在极小或大屏幕上欣赏到美景。
我的2美分。
链接地址: http://www.djcxy.com/p/63023.html