創建CSS和溢出的菜單：汽車

頁面的主要結構是這樣的：創建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中查看它。

來源

2009-10-18 JoostM

我正在用Firebug玩你的網站頁面。除了這個之外，你真的不能真的有一個快速的解決方案：

將「div＃Menu」設置爲100％和「div＃Menu H1」爲百分比例如5％的高度。

你有「菜單」，「藝術家」，「標籤」和「格式」= 4 h1項目。這是5 X 4 = 20％。

將「div＃Menu ul」設置爲100-20 = 80％。

玩弄數字，並調整垂直對齊，你應該很好去。不足之處在於，您無法在極小或大屏幕上欣賞到美景。

我的2美分。

來源

2009-10-18 12:36:09

在H1上設置高度是個好主意，試試吧，謝謝！ – JoostM 2009-10-18 12:51:40

創建CSS和溢出的菜單：汽車

回答

相關問題