最明显的解决方案是关闭容器…将整个宽度div然后打开一个新容器。标题“容器”只是一个类……不是绝对要求它可以同时容纳 所有内容 。
在这种情况下，您将背景颜色应用于全宽div，而 无需 将颜色应用于内部受限div。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}.container { max-width: 80%; border: 1px solid red; margin: 0 auto;}.fullwidth { background: orange;}header { height: 50px; background: #663399;}.mydiv { min-height: 50px;}footer { height: 50px; background: #bada55;}<div > <header></header></div><div > <div > <div > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> </div> <div > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> </div> </div></div><div > <footer></footer></div>但是，对于某些对象，他们喜欢一个 单一的 全包围容器，因此，如果您所需要的只是背景，则可以使用伪元素，如下所示：
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}body { overflow-x: hidden;}.container { max-width: 80%; border: 1px solid red; margin: 0 auto;}header { height: 50px; background: #663399;}.mydiv { height: 100px; position: relative;}.mydiv:after { content: ""; position: absolute; height: 100%; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: orange; z-index: -1;}footer { height: 50px; background: #bada55;}<div > <header></header> <div > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> </div> <footer></footer></div>在某些情况下，需要在100％宽的div中包含实际内容，并且无法随意打开/关闭容器（可能是为了改装滑块）。
在这些情况下， 已知新div的高度时， 可以使用相同的技术将其定位为100％视口宽度：
* { margin: 0; padding: 0;}body { overflow-x: hidden;}.container { max-width: 80%; border: 1px solid red; margin: 0 auto;}header { height: 50px; background: #663399;}.mydiv { height: 100px; position: relative;}.myslider { position: absolute; height: 100%; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: orange;}footer { height: 50px; background: #bada55;}<div > <header></header> <div > <div > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p> </div> </div> <footer></footer></div>注意：在某些情况下
100vw可能会导致溢出，并且可能会出现水平滚动条。
overflow-x:hidden就
<body>可以参加到that..it不应该是一个问题，因为一切仍在容器内。
