最明显的解决方案是关闭容器…将整个宽度div然后打开一个新容器。标题“容器”只是一个类……不是绝对要求它可以同时容纳 。
在这种情况下，您将背景颜色应用于全宽div，而 无需 将颜色应用于内部受限div。
* {
-webkit-@R_925_2419@-sizing: border-@R_925_2419@;
-moz-@R_925_2419@-sizing: border-@R_925_2419@;
@R_925_2419@-sizing: border-@R_925_2419@;
margin: 0;
padding: 0;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
.fullwidth {
background: orange;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
/* background: orange; */
min-height: 50px;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
</div>
<div class="fullwidth">
<div class="container">
<div class="mydiv">
<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 class="mydiv">
<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 class="container">
<footer></footer>
</div>
但是，对于某些对象，他们喜欢一个 单一的 全包围容器，因此，如果您所需要的只是背景，则可以使用伪元素，如下所示：
* {
-webkit-@R_925_2419@-sizing: border-@R_925_2419@;
-moz-@R_925_2419@-sizing: border-@R_925_2419@;
@R_925_2419@-sizing: border-@R_925_2419@;
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 class="container">
<header></header>
<div class="mydiv">
<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中包含实际内容，并且无法随意打开/关闭容器（可能是为了改装滑块）。
在这些情况下， 可以使用相同的技术将其定位为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 class="container">
<header></header>
<div class="mydiv">
<div class="myslider">
<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不应该是一个问题，因为一切仍在容器内。
602392714
清零编程群