我想创建一个固定宽度的布局,其中页面两侧的背景颜色不同,但无论您缩小多远,背景颜色都会从页面的任意一侧无限延伸。
例如,我不打算创建一个9000x10像素的图像,其中任何一侧都有正确的颜色并将其平铺,因为这只有在你缩小到足以看到背景图像的边缘时才会起作用。 / p>
这可能吗?
谢谢!
修改
我应该指定,背景应该覆盖页面的整个高度,而不仅仅是窗口/视口的高度。
答案 0 :(得分:6)
This似乎有效:
<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;
}
答案 1 :(得分:3)
这适用于IE7 +,包含少量和大量内容:
Live Demo(很多内容)
Live Demo(内容很少)
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
}
答案 2 :(得分:1)
这对你有什么用? http://jsfiddle.net/PNYVe/
答案 3 :(得分: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/但它在我的浏览器中有效。
答案 4 :(得分:0)
使用Matt示例,只需添加一个容器就可以解决它: http://jsfiddle.net/PNYVe/3/