创建CSS和溢出的菜单：汽车

问题描述：

<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的高度，是否有办法达到相同的效果？

如果你愿意，你可以看到the page。我会发布链接到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美分。

在H1上设置高度是个好主意，试试吧，谢谢！ – JoostM 2009-10-18 12:51:40

创建CSS和溢出的菜单：汽车

相关推荐