css - 空の div をページの長さに拡張します

Question

ページの左側と右側に絶対に配置された 100 ピクセルに設定された 2 つの div があります。それらの間にコンテンツセクションがマージンがあります。大きなページを上から下にスクロールすると、画像がページと共にスクロールするようにします。私のサイトにはさまざまなサイズの合計 7 ページがあり、CSS を使用してこれを機能させようとしています。誰でも私を助けることができますか？

Answer 1

CSSの固定位置を見てください。

position:fixed; top:0px; left:0px;

ここを参照してください: http://limpid.nl/lab/css/fixed/left-sidebar-and-right-sidebar

Answer 2

これがあなたの問題を解決するかもしれない例です。

background-attachment：fixed;を使用します。ただし、要素内で画像を静的にする方法やページをスクロールする方法に応じて、position：fixedattibuteを使用することもできます。背景オプションの問題は、背景画像をデザインする必要があることですが、機能します。

編集：これは、固定ポジショニングとクロスブラウザの互換性に関する優れた投稿です。

Answer 3

<div id="image1">
</div>

<div id="image2">
</div>

#image1 {
    position: absolute;
    width: 100px;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-image: url(../media/warlock.jpg);
    min-height: 100%;
    height: 100%;
    background-position: center;
    background-attachment: scroll;
}

#image2 {
    position: absolute;
    width: 100px;
    top: 0px;
    right: 0px;
    padding: 0;
    background-image: url(../media/paladin.jpg);
    min-height: 100%;
    height: 100%;
    background-position: center;
    background-attachment: scroll;
    background-repeat: repeat;
}

これは基本的に、2 つのサイド div のコードです。ページの長さをスクロールしたい背景画像以外は完全に無効です。