7

ページの両側の背景色が異なる固定幅のレイアウトを作成したいのですが、ズームアウトしても、ページの両側から背景色が無限に広がります。

たとえば、背景画像の端が見えるようにズームアウトしない場合にのみ機能するため、どちらかの側に正しい色で9000x10ピクセルの画像を作成してタイリングすることは考えていません。

これは可能ですか？

ありがとう！

編集：

私が指定したはずですが、背景はウィンドウ/ビューポートの高さだけでなく、ページの高さ全体をカバーする必要があります。

4

5 に答える 5

7

これはうまくいくようです：

<body>
<div id="bg-right"></div>
<!-- rest of page -->
</body>


body {
  background-color: purple;
}
#bg-right {
  background-color: yellow;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
}
于 2011-01-18T10:31:14.510 に答える
3

これは IE7+ で動作します。

ライブ デモ(多くのコンテンツ)
ライブ デモ(少ないコンテンツ)

HTML:

<div id="left"></div>
<div id="right"></div>
<div id="container"></div>

CSS:

html, body {
    margin: 0; padding: 0; border: 0; 
}
body {
    background: #ccc
}
#left, #right {
    position: fixed;
    width: 50%;
    height: 100%;
    top: 0
}
#left {
    background: #ccc;
    left: 0
}
#right {
    background: #999;
    right: 0
}
#container {
    background: #fff;
    width: 80%;
    margin: 0 auto;
    position: relative
}
于 2011-01-18T10:47:53.993 に答える
1

height: 100%; position: fixed;後でページと一緒にスクロールする背景画像を持つオプションを開いたままにしたかったので、私はこの解決策が好きではありませんでした。（質問を書いているときは考えていませんでしたが）私は遊びをしていて、うまくいくことがわかりましmin-height: 100%;た。

<html>
    <head>
        <style type="text/css">

            body {
                padding: 0;
                margin: 0;
            }

            #container {
                width: 100%;
                min-height: 100%;
                position: relative;
            }

            #left, #right {
                width: 50%;
                height: 100%;
                position: absolute;
                z-index: -1;
            }

            #left {
                left: 0;
                background-color: navy;
            }

            #right {
                right: 0;
                background-color: maroon;
            }

            #content {
                width: 512px;
                height: 100%;
                margin: 0 auto;
                background-color: white;
            }

        </style>
    </head>
    <body>
        <div id="container">
            <div id="left"></div>
            <div id="right"></div>
            <div id="content">
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
                Hi<br />
            </div>
        </div>
    </body>
</html>

何らかの理由で、jsfiddle.net では機能しません: http://jsfiddle.net/HktPN/しかし、私のブラウザーでは機能します。

于 2011-01-20T11:04:43.407 に答える
1

これはどうですか？http://jsfiddle.net/PNYVe/

于 2011-01-18T09:52:36.957 に答える
0

Matt の例を使用すると、コンテナーを追加するだけで解決します: http://jsfiddle.net/PNYVe/3/

于 2011-01-18T10:29:55.507 に答える