我正在一个网站上工作，想看看是否有更好的方法来达到相同的结果。
问题：该页面由几个部分组成，每个部分都有自己的背景，该背景应该是浏览器的整个宽度。每个部分内的内容均以 960 像素为中心。目前，我正在将每个部分包装在一个看似不必要的包装纸中。有人有更好的解决方案吗？
示例代码：
<!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>
理想的解决方案：同一页面，但没有 3 个额外的包装 div。
有人建议吗？
如果你想要动态高度，而不是使用图像作为背景，我认为这是最好的做法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
