使用CSS和溢出创建菜单：自动_Css_Height_Overflow

使用CSS和溢出创建菜单：自动

css

使用CSS和溢出创建菜单：自动,css,height,overflow,Css,Height,Overflow,页面的主要结构如下所示： <html> <body> <div id="Menu"> <h1>Menu</h1> <ul id="MenuList></ul> <h1>Submenu 1</h1> <ul

页面的主要结构如下所示：

<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使菜单中的H1元素可单击，这样所有其他UL都会向上滚动，而在H1向下滚动之后，UL会向上滚动。我想滚动主独立的菜单，我想滚动条，若需要，在每个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; } 这正是我想要的方式。主区域是可滚动的，每个UL在扩展时，如果有超过包含菜单DIV所能包含的内容，就会得到一个滚动条

唯一的问题是我必须指定包含菜单DIV的87%的高度，这只适用于我的屏幕大小、窗口大小和字体大小组合。有没有一种方法可以在不硬编码每个UL高度的情况下实现相同的效果

如果你愿意，你可以看看。我会发布到CSS/musicdb.CSS和JS code/musicdb.JS的链接，但我不被允许。如果您想查看源代码，可以通过向URL添加？mode=xml或？mode=html来切换内容类型，并在IE或Firefox中查看

我在你的网站页面上玩Firebug。除此之外，无法为您提供一个真正冗长的快速解决方案：

将divMenu设置为100%，并将divMenu H1设置为百分比高度，例如5%

您有菜单、艺术家、标签和格式=4个h1项目。这是5 X 4=20%

将divMenu ul设置为100-20=80%

玩数字游戏，并调整垂直对齐，你应该很好去。缺点是，在非常小或非常大的屏幕上都看不到很好的视图

我的2美分。

在H1上设置高度是个好主意，我会试试的，谢谢！