0

ページの主な構造は次のとおりです。

<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 {高さ：100％; オーバーフロー：非表示; フォントサイズ：.8em; }
    本体{高さ：100％; オーバーフロー：非表示; }
    div＃Main {位置：絶対; 右：0px; 上：0px; 下：0px; 幅：79.9％; }
    div＃Menu {位置：絶対; 左：0px; 上：0px; 下：0px; 幅：20％; }

    div＃Main {オーバーフロー：自動; }
    div＃Menu h1 {font-size：1.5em; }
    div＃Menu ul {max-height：87％; オーバーフロー：自動; }

これは私が望むように正確に機能します。#Main領域はスクロール可能であり、展開されると、含まれている#Menu DIVが含むことができるよりも多くのコンテンツがある場合、各ULはスクロールバーを取得します。

唯一の問題は、含まれている#Menu DIVの87％の高さを指定する必要があることです。これは、画面サイズ、ウィンドウサイズ、およびフォントサイズの組み合わせに対してのみ機能します。各ULの高さをハードコーディングせずに同じ効果を達成する方法はありますか？

必要に応じて、ページを表示できます。CSS（/musicdb.css）とJSコード（/musicdb.js）へのリンクを投稿しますが、許可されていません。ソースを表示する場合は、URLに？mode = xmlまたは？mode = htmlを追加してコンテンツタイプを切り替え、IEまたはFirefoxで表示できます。

4

1 に答える 1

0

私はFirebugであなたのサイトページをいじっていました。これを除いて、あなたのために本当に怠惰な迅速な解決策を持つことはできません：

「div＃Menu」を100％に設定し、「div＃MenuH1」をパーセンテージの高さ（たとえば5％）に設定します。

「メニュー」、「アーティスト」、「ラベル」、「フォーマット」=4h1のアイテムがあります。これは5X4 = 20％です。

「div＃Menuul」を100-20 = 80％に設定します。

数字をいじって、垂直方向の配置も調整してください。欠点は、極端に小さい画面や大きい画面では見栄えがよくないことです。

私の2セント。

于 2009-10-18T12:36:09.050 に答える