logo标签列表

页面两侧不同的背景颜色

htmlcsscolorsbackgroundtiling
7
我想创建一个固定宽度的布局，其中页面两侧的背景颜色不同，但无论您缩小多少倍，背景颜色都会无限延伸到页面两侧。
例如，我不想创建一个9000x10像素的图像，并在其上正确地放置颜色并平铺它，因为这只有在您没有缩小到足以看到背景图像边缘时才起作用。
这可行吗？
谢谢！
编辑：
我应该指出，背景应覆盖整个页面的高度，而不仅仅是窗口/视口的高度。
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;
}
这似乎可以工作，但是你应该注意position:fixed在IE6中不受支持。 - Dan
这里存在一个问题，即在应该是黄色的地方，你可以看到紫色背景的1px（取决于视口宽度像素计数是偶数还是奇数）（在Chrome中测试）。 - thirtydot
@thirtydot: 现在似乎已经修复了。 - Fred Nurk
@Fred Nurk：是的，已经修复了。我认为我更喜欢你的解决方案，因为它只依赖于一个额外的元素。 - thirtydot
@Fred Nurk：很不错，但不幸的是它不能在我们好朋友IE上运行。 - thirtydot
1
我知道文本不是讽刺的好媒介，但“好朋友”这个词几乎让我喷出了咖啡。 - Fred Nurk
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
}
1
2
如果内容很大，垂直滚动条出现时，背景将不会延伸到末尾。例如：http://jsfiddle.net/dan86/PNYVe/2/ - Dan
啊，我也需要那个。:/ - Jesse
只需将“absolute”更改为“fixed”。这样似乎可以正常工作。http://jsfiddle.net/JzTdF/ - Alin Purcaru
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/ 但是在我的浏览器中可以。
0
这解决了内容过多的问题。但是尝试删除一些内容，背景将会收缩到内容的大小，并且不会填满整个页面 xD。 - Dan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接