CSS - 如何从 div 溢出到整个屏幕宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28565976/
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
CSS - how to overflow from div to full width of screen
提问by dotnetnoob
I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.
我有一个包含 DIV，我将其用作响应式网格的一部分。它扩展到我允许的最大宽度 1280 像素，然后为大型设备显示边距。这是我的 CSS + 一点 Less。
.container
{
margin-left:auto;
margin-right:auto;
max-width:1280px;
padding:0 30px;
width:100%;
&:extend(.clearfix all);
}
However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?
但是在某些情况下，我想横向溢出 - 假设我有一个需要全宽的背景图像或颜色。我不擅长 CSS - 但有可能实现我想要的吗？
回答by Paulie_D
The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.
最明显的解决方案是关闭容器...拥有全宽 div 然后打开一个新容器。标题“容器”只是一个类……并不是同时容纳所有内容的绝对要求。
In this instance you apply the background color to the full width div and you don't needto apply a color to the internal, restricted 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 {
/* 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>However, for some they like a singleall encompassing container so if all you are after is a background you could use a pseudo-element like so:
然而，对于某些人来说，他们喜欢一个单一的全方位容器，所以如果你所追求的只是一个背景，你可以使用这样的伪元素：
* {
-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 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>Support for vwis IE9+ - See http://caniuse.com/#feat=viewport-units
支持vwIE9+ - 请参阅http://caniuse.com/#feat=viewport-units
There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).
存在100%宽的div中需要实际内容而不能随意打开/关闭容器的情况（可能是改装了一个滑块）。
In those cases, where the height of the new div is knownthe same technique can be used to position it as to be 100% viewport wide:
在这些情况下，当新 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>Note: there are instances where 100vwcan cause overflow and a horizontal scrollbar might appear. overflow-x:hiddenon the <body>can attend to that..it should not be an issue because everything else is still inside the container.
注意：在某些情况下100vw可能会导致溢出并且可能会出现水平滚动条。overflow-x:hidden就<body>可以参加到that..it不应该是一个问题，因为一切仍在容器内。
回答by l2aelba
I found this super useful trickby using vwon margins(Source)
我发现这个超级有用的技巧使用vw上margins（来源）
Example :
例子 ：
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
Demo :
演示：
html,body {
overflow-x: hidden; /* Prevent scrollbar */
}
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
height: 50px;
background: rgba(28, 144, 243, 0.5);
}
.container {
width: 300px;
height: 180px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.5);
}<div class="container">
<div class="inner-but-full"></div>
</div>Can I use :
我可以用吗 ：
回答by Constantin
<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>