Html 页面两侧不同的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4722547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Different background color either side of page
提问by Jesse
I want to create a fixed-width layout where the background color on either side of the page is different, but with the background colours extending infinitely from either side of the page no matter how far you zoom out.
我想创建一个固定宽度的布局，其中页面两侧的背景颜色不同，但是无论您缩小多远，背景颜色都会从页面的任一侧无限延伸。
For example, I'm not looking to create a 9000x10 px image with the correct colours on either side and tiling it, as this would only work if you dont zoom out far enough to see the edge of the background image.
例如，我不希望创建一个 9000x10 像素的图像，在任一侧都有正确的颜色并平铺它，因为这仅在您没有缩小到足以看到背景图像的边缘时才有效。
Is this possible?
这可能吗？
Thanks!
谢谢！
Edit:
编辑：
I should have specified, the background should cover the full height of the page, not just the height of the window/viewport.
我应该指定，背景应该覆盖页面的整个高度，而不仅仅是窗口/视口的高度。
采纳答案by Jesse
I didn't like the height: 100%; position: fixed;solution because I wanted to leave the option open of having a background image that scrolled with the page later on. (Although I didn't think of this in writing the question.) I had a play and found min-height: 100%;to work.
我不喜欢该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>
For some reason it doesn't work in jsfiddle.net: http://jsfiddle.net/HktPN/But it does in my browser.
出于某种原因，它在 jsfiddle.net 中不起作用：http: //jsfiddle.net/HktPN/但它在我的浏览器中起作用。
回答by Fred Nurk
回答by thirtydot
This works in IE7+ with both little and lots of content:
这在 IE7+ 中适用，内容很少和很多：
Live Demo(lots of content)
Live Demo(little content)
HTML:
HTML：
<div id="left"></div>
<div id="right"></div>
<div id="container"></div>
CSS:
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
}
回答by Matt Asbury
How's this for you? http://jsfiddle.net/PNYVe/
这对你来说怎么样？http://jsfiddle.net/PNYVe/
回答by NicolaPasqui
using Matt example, just adding a container solves it : http://jsfiddle.net/PNYVe/3/
使用 Matt 示例，只需添加一个容器即可解决：http: //jsfiddle.net/PNYVe/3/
