css - 固定 Div がスクロール バーを隠している

Question

奇妙な問題があり、ページ内をスクロールする DIV があります...しかし、その div 内には修正済みの「ヘッダー」があります...そして、私のレイアウトは流動的 (100%) 幅であるため、下の div のスクロールバー上の「FXED」div カバー....

これを修正する最善の方法は何ですか? 何が起こっているかの簡単なスクリーンショットを添付しました...お役に立てば幸いです。

/* BLUE SECTION */    
.floatingHeaderBox {
        width: 100%;
    }

    /* RED BOX BELOW */
    .contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}

.contentBoxRight{ overflow:auto; overflow-x:hidden; }

Answer 1

このようにできると思いますhttp://jsfiddle.net/yuliantoadi/bXukG/1/

私はあなたのhtmlを持っていないので、自分で作りました。

Answer 2

floatHeaderBox が次のようにスクロール ボックス内にある場合:

<div class="contentBoxRight">
    <div class="floatingHeaderBox">Hdr</div>
</div>

スクロールバーを考慮して、負の左マージンを追加するだけです。x-overflow は非表示に設定されているため、移動したことがわかりません。パディングまたはサブコンテナを追加して、左側に目的のスペースを戻します。

.floatingHeaderBox {
        width: 100%;
        margin-left:-18px;
    }