2

固定幅のWebサイトを構築しています（margin：autoのクラシックラッパーを使用）が、サイドバーの背景を画面の右端まで拡張したいと思います。

これまでのところ、私はこれを達成しました：

HTML

<div id="wrapper">
    <div id="left">Content area</div>
        <div id="right">
            <div id="actual-sidebar">
                Sidebar
            <span class="clearme"></span>
        </div>
    </div>
</div>

CSS

body {
    background: #333;
    color: #fff;
    overflow-x: hidden;
}

#wrapper {
    width: 500px;
    height: 1200px;
    margin: auto;
    border: 2px dashed #fff;
}

#left {
    width: 300px;
    height: 500px;
    float: left;
}

#right {
    width: 175px;
    height: 500px;
    margin-left: 325px;
    margin-right: -9999px;
    padding-right: 9999px;
    background: #777;
}

#actual-sidebar {
    width: 100%;
    height: 100%;
    border: 2px dotted #f0f;
}

ここで実際の動作を確認できます：http：
//jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/

この種の「全幅サイドバー」は、cssのみを使用して可能ですか？

上記の例では、実際のサイドバーの幅はピンクの境界線で強調表示されており、残りはすべてパディングと負のマージンです。Chromeで動作しましたが、IEが壊れたため、overflow-x：hiddenを追加して修正しました。

問題は、クリックして右にドラッグすると、選択するものがない場合でもビューがスクロールし、最終的にコンテンツが非表示になることです。私はこの問題を乗り越えることができないようです。

「ドラッグアンドスクロール」の問題に対する修正はありますか、それともこれを達成するためのまったく異なる方法がありますか？

4

2 に答える 2

0

CSS3グラデーションをボディの背景（サイドバーと同じ色）として使用して、画面の端まで伸びているような錯覚を作り出します。

.sidebar {
  background: salmon;
}

body {
  background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #fa8072), color-stop(50%, #ffffff));
  background: -webkit-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: -moz-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: -o-linear-gradient(right, #fa8072 50%, #ffffff 50%);
  background: linear-gradient(right, #fa8072 50%, #ffffff 50%);
}​

デモ

于 2012-10-24T01:59:32.003 に答える
0

これに追加する#right{ position: fixed;}と、水平スクロールバーが削除されます。それは受け入れられますか？

于 2012-10-24T02:23:47.920 に答える