全宽背景，没有包装 [英] Full width background, without a wrapper
问题描述
我在一个网站上工作，我想我会看看是否有更好的方法来获得相同的结果。
问题： 网页由多个部分组成，每个部分都有自己的背景，应该是浏览器的整个宽度。每个部分中的内容以960px为中心。目前，我把每个部分包装在一个看似无神论的包装中。有没有人有更好的soloution？
示例代码：
;！doctype html>
< html>
< head>
< meta charset =utf-8>
< title>问题示例< / title>
< style>
.content {
width：960px;
margin：0 auto;
padding：90px 0;
background：rgba（0,0,0,0.5）;
}
#header_wrapper {
background：red
}
#content_wrapper {
background：green
}
#footer_wrapper {
background：yellow
}
< / style>
< / head>
< body>
< div id =header_wrapper>
< div class =content>
标题内容
< / div>
< / div>
< div id =content_wrapper>
< div class =content>
内容内容
< / div>
< / div>
< div id =footer_wrapper>
< div class =content>
页脚内容
< / div>
< / div>
< / body>
< / html>
理想解决方案：同一页面，但没有3个额外的封装div。
建议任何人？
您的要求是相互矛盾的。 p>
您指定三个部分中的每一个应跨越页面的整个宽度（并包含不同的背景），但每个部分的内容必须限制为960像素。单个div不能同时具有100％宽度和960px宽度。没有做一些JavaScript魔术，你乱七八糟的间距，你不能实现这个没有折叠的div。
I'm working on a site, and thought I'd see if there is a better way to achive the same result.
The problem: The page is made up of several sections, each one with its own background, that should be the full width of the browser. The content within each section is in a 960px centered. At present I am wrapping each section in a, seemingly unnessary, wrapper. Does anyone have a better soloution?
Example Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Problem Example</title>
<style>
.content{
width:960px;
margin: 0 auto;
padding: 90px 0;
background: rgba(0,0,0,0.5);
}
#header_wrapper{
background: red
}
#content_wrapper{
background: green
}
#footer_wrapper{
background: yellow
}
</style>
</head>
<body>
<div id="header_wrapper">
<div class="content">
Header Content
</div>
</div>
<div id="content_wrapper">
<div class="content">
Content Content
</div>
</div>
<div id="footer_wrapper">
<div class="content">
Footer Content
</div>
</div>
</body>
</html>
Ideal Solution: The same page but without the 3 extra wrapper divs.
Suggestions anyone?
Your requirements are contradictory.
You specify that each of the three sections should span the entire width of the page (and contain different background) but the contents of each of these must be restricted to 960px. A single div can not simultaneously have 100% width and 960px width. Short of doing some JavaScript magic where you mess around with the spacing, you can not achieve this without folded divs.
这篇关于全宽背景，没有包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
