页面的主要结构是这样的:
<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 滚动#Main，如果需要，我想在#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 的高度进行硬编码的情况下实现相同的效果？
喜欢的可以看the page .我会发布指向 CSS (/musicdb.css) 和 JS 代码 (/musicdb.js) 的链接，但我不允许这样做。如果要查看源代码，可以通过在 URL 中添加 ?mode=xml 或 ?mode=html 来切换内容类型，然后在 IE 或 Firefox 中查看。
最佳答案
我正在使用 Firebug 浏览您的网站页面。除了这个之外，真的没有真正优雅的快速解决方案:
将“div#Menu”设置为 100%，将“div#Menu H1”设置为百分比高度，比如 5%。
您有“菜单”、“艺术家”、“标签”和“格式”= 4 个 h1 项。那是 5 X 4 = 20%。
将“div#Menu ul”设置为 100-20 = 80%。
玩转数字并调整垂直对齐方式，您应该可以开始了。缺点是，在极小或极大的屏幕上您将无法获得很好的视野。
我的 2 美分。
关于css - 使用 CSS 和溢出创建菜单 : auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1584749/