0

以前に最初の質問で説明したように、3 列の背景タイプのものを作成しました: CSS を使用して 3 列の Web サイトの背景を作成する方法は? . とにかく、私はそれが次のようにほとんどうまく機能しています：

すべてのページのコンテンツ (ヘッダー、コンテンツ、フッターなど) を含む ID centercolumn の div があります。

<html>
    <body>
        <div id="centercolumn">
            <!-- content -->
        </div>
    </body>
</html>

次に、CSS で次の設定を行います (関連するコードのみを表示します)。

body {
    background-image: url('theimagetobetiledalongthesides.png');
}

#centercolumn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    margin-left: auto;
    margin-right: auto;

    width: 760px;

    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png');
}

基本的に、body はページ全体の背景を提供し、次に centercolumn div がその上にあり、ページ全体に広がり、異なる背景画像を持ちます。これにより、3 つの列があるように見えます。1 つはコンテンツの中央に、2 つは側面にあります。

私が抱えている問題はoverflow、centercolumn div のプロパティにあると思います。私がテストしたすべてのブラウザー (Chrome、Firefox、IE、Opera、および Safari) では、最初は中央の列がページの一番下まで表示されます (そうあるべきです)。ページを縦方向にサイズ変更して小さく/短くすると、実際のコンテンツ (テキスト) に到達すると、ページ/ブラウザーの横にスクロールバーが表示されます (通常どおり)。ただし、コンテンツの残りの部分を表示するために下にスクロールすると、中央列の div が完全に下に移動していないように見えます。下にスクロールしました）。私のテキストは、中央の列の背景画像を使い果たし、本文の背景画像に続きます。

centercolumn div のオーバーフローを に設定しscrollてページのサイズ変更を開始すると、正常に動作します (div が完全に下にあるように見えます - centercolumn の背景画像が切り取られません)。スクロール バーは、実際にはブラウザの横ではなく、中央のコンテンツ カラムの横に表示されます。

ブラウザー ウィンドウの縦方向のサイズを変更したときに、中央の列の横にスクロール バーが表示されないように、中央のコンテンツ列の異なる背景画像を完全に下に移動するにはどうすればよいですか?

編集: http://jsfiddle.net/dDfkC/1/の JSFiddle の例。

4

3 に答える 3

0

次のようなことを試すことができます：

#centercolumn {
    position: absolute;
    top: 0;
    min-height:100%;

    margin: auto;

    width: 760px;
    background-repeat: repeat-x;
    background-image: url('theimagetobetiledalongthemiddlecontentcolumn.png');
}

あなたが持っているものとあなたが達成したいことの例を見る方がおそらく良いでしょう

于 2012-10-15T22:20:42.597 に答える
0

position:absolute を使用していますが、これは間違っています。相対位置を使用してから margin:0 auto; この列を中央に配置します。

あなたがする必要があるのはそれを設定することです

#centercolumn {
    position:relative;
    margin: 0 auto;
    width:760px;
    background-image: url(whatever);
    background-repeat: both;
}

また、コンテンツがどんなに少なくても、ページの一番下まで拡大したい場合は、次のようにします。

body, html {
    height:100%;
}

そして上に追加

#centercolumn {
    min-height: 100%;
}

および実際の基本的な CSS リセット:

* {
    margin:0;
    padding:0;
}
于 2012-10-15T22:20:57.617 に答える
0

このjsfiddleのように、左右の列に固定配置を使用し、メイン列に静的配置を使用できます

于 2012-10-15T22:24:22.907 に答える