1

このサイトや他のサイトを調べても、この特定の問題の解決策は見つかりませんでした。私が達成したいことは、次の例（これも下に配置されています）を見た後で最もよく説明できます：http： //jsfiddle.net/yev8/HRQB5/

現在の状況：この例では、左の列（固定幅）と右の列（液体の幅）があります。右の列には4本のバーがあります。上部に配置された2つのバーは、すべてのページで同じです。下部に配置された2つのバーはページごとに異なり、2つのすべての組み合わせが可能です。真ん中には、利用可能なスペースを埋めるdiv「content」があり、必要に応じて、垂直スクロールバーがあります。

達成したいこと：divのスクロールバーを、デフォルトのスクロールバーのように、ページ全体を垂直にカバーするスクロールバーに置き換えたいと思います。スクロールするとき、左側のメニューとすべてのバーの位置が変更されないようにする必要があります。スクロールするのは中央のコンテンツdivだけです。

これが可能かどうかはわかりませんが、理想的な状況では、cssのみでこれを修正したいと思います。これが不可能な場合は、javascript（jQueryの有無にかかわらず）が機能します。

誰かが私に何か提案をしたり、正しい方向に私を向けたりできますか？思い通りに動かないようです。

私の現在のhtml：

<!doctype html>
<html lang="nl">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <title></title>
        <link href="css/stylesheet.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div id="wrapper">
            <div id="left">
                <ul>
                    <li><a href="#" title="">Menu item</a></li>
                    <li><a href="#" title="">Menu item</a></li>
                    <li><a href="#" title="">Menu item</a></li>
                </ul>
            </div>
            <div id="right">
                <div id="bar-1">bar-1</div>
                <div id="bar-2">bar-2</div>
                <div id="content">
                    <div style="height:400px;background-color:#ff0;"></div>
                    <div style="height:400px;background-color:#f0f;"></div>
                    <div style="height:400px;background-color:#0f0;"></div>
                    <div style="height:400px;background-color:#00f;"></div>
                </div>
                <div id="bar-3">bar-3</div>
                <div id="bar-4">bar-4</div>
            </div>
        </div>
    </body>
</html>

私の現在のCSS：

html, body {
    height: 100%;
    background-color: #fff;
    color: #2f2f2f;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
}

div#wrapper {
    height: 100%;
    margin: auto;
    position: relative;
}

div#left {
    height: 100%;
    float: left;
    width: 256px;
    overflow-y: auto;
    background-color: #fcfcfc;
}

div#right {
    height: 100%;
    position: relative;
    margin-left: 256px;
}

    div#right div#bar-1 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        height: 64px;
        top: 0;
        background-color: #eaeaea;
    }

    div#right div#bar-2 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        top: 64px;
        height: 32px;
        background-color: #979797;
    }

    div#right div#content {
        position: absolute;
        left: 0;
        right: 0;
        top: 96px;
        bottom: 224px;
        overflow-y: scroll;
    }

    div#right div#bar-3 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 128px;
        height: 96px;
        background-color: #eaeaea;
    }

    div#right div#bar-4 {
        overflow: hidden;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 128px;
        background-color: #d5d5d5;
    }
4

1 に答える 1

1

次のような意味ですか：http：//jsfiddle.net/Y2spp/2/

他のバーに従って、コンテンツの上下にパディングを追加しました。コンテンツが100％の高さであり、バーがコンテンツの上にあることを確認してください。

CSSの変更のみ：

div#right div#bar-1 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    height: 64px;
    z-index:4;
    top: 0;
    background-color: #eaeaea;
}

div#right div#bar-2 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    top: 64px;
    z-index:4;
    height: 32px;
    background-color: #979797;
}

div#right div#content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    bottom: 0px;
    padding-top:96px;
    padding-bottom:224px;
    overflow-y: scroll;
    z-index:2;
}

div#right div#bar-3 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
z-index:4;
    bottom: 128px;
    height: 96px;
    background-color: #eaeaea;
}

div#right div#bar-4 {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 17px;
    z-index:4;
    bottom: 0;
    height: 128px;
    background-color: #d5d5d5;
}​
于 2012-12-13T16:05:53.833 に答える