CSS 如果容器 div 较小，如何将子 div 扩展到 100% 屏幕宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31391459/
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
How can I expand a child div to 100% screen width if the container div is smaller?
提问by Mad Scientist
The parent element of the whole page is a centered div limited to a max-width of 960px. All other elements on the page are children of that parent div. The simplified structure is the following:
整个页面的父元素是一个居中的 div，最大宽度为 960px。页面上的所有其他元素都是该父 div 的子元素。简化后的结构如下：
<div id="parent">
<div id="something"></div>
<div id="wide-div></div>
<div id="something-else></div>
</div>
While the parent div shouldn't expand beyond a width of 960px, the div I called "wide-div" here should fill the entire width of the screen. It contains a single image that is wider than the 960px, and it should set a different background color for the entire width of the screen.
虽然父 div 不应扩展超过 960px 的宽度，但我在此处称为“wide-div”的 div 应填满屏幕的整个宽度。它包含一个宽度大于 960px 的图像，并且应该为整个屏幕宽度设置不同的背景颜色。
I can't easily take that div out of the parent div, it would mess up other parts of my layout and it would make the whole thing rather awkward.
我不能轻易地从父 div 中取出那个 div，它会弄乱我布局的其他部分，并且会使整个事情变得相当尴尬。
I found a few tricks on how you can achieve this, but none seemed to fit my requirements. My design is responsive, or at least I'm trying to achieve that. The tricks I found relied on knowing the size of the involved elements, which is not fixed in my case.
我发现了一些关于如何实现这一目标的技巧，但似乎没有一个适合我的要求。我的设计是响应式的，或者至少我正在努力实现这一目标。我发现的技巧依赖于知道所涉及元素的大小，这在我的情况下是不固定的。
Is there a way to expand the inner div to the full screen width in a responsive layout?
有没有办法在响应式布局中将内部 div 扩展到全屏宽度？
回答by GolezTrol
You can set the width based on the vw (viewport width). You can use that value too using the calcfunction, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div.
您可以根据 vw（视口宽度）设置宽度。您也可以使用该calc函数使用该值来计算 div 的左边距。通过这种方式，您可以将其定位在流中，但仍然突出在居中的固定宽度 div 的左侧和右侧。
Support is pretty good. vwis supported by all major browsers, including IE9+. The same goes for calc(). If you need to support IE8 or Opera Mini, you're out of luck with this method.
支持还算不错。所有主流浏览器vw都支持，包括 IE9+。也是如此calc()。如果您需要支持 IE8 或 Opera Mini，那么这种方法就不走运了。
-edit-
-编辑-
As mentioned in the comments, when the content of the page is higher than the screen, this will result in a horizontal scrollbar. You can suppress that scrollbar using body {overflow-x: hidden;}. It would be nice though to solve it in a different way, but a solution using leftand rightlike presented in Width:100% without scrollbarsdoesn't work in this situation.
正如评论中提到的，当页面内容高于屏幕时，这将导致水平滚动条。您可以使用body {overflow-x: hidden;}. 虽然以不同的方式解决它会很好，但是在这种情况下，使用left和rightlike的解决方案在Width:100% 没有滚动条的情况下不起作用。
div {
min-height: 40px;
box-sizing: border-box;
}
#parent {
width: 400px;
border: 1px solid black;
margin: 0 auto;
}
#something {
border: 2px solid red;
}
#wide-div {
width: 100vw;
margin-left: calc(-50vw + 50%);
border: 2px solid green;
}<div id="parent">
<div id="something">Red</div>
<div id="wide-div">Green</div>
<div id="something-else">Other content, which is not behind Green as you can see.</div>
</div>回答by crico_aven
After much research, I found this solution: Creating full width (100% ) container inside fixed width container. I think that it is the best solution because it does not depend on any external factor, only the div that you want to expand.
经过大量研究，我找到了这个解决方案：Creating full width (100% ) container inside fixed width container。我认为这是最好的解决方案，因为它不依赖于任何外部因素，只依赖于您要扩展的 div。
<div class="container" style="width: 750px; margin: 0 auto;">
<div class="row-full">
--- Full width container ---
</div>
</div>
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
回答by Organiccat
Typically the responsive element, bootstrap or Foundation, allow you to add a "row" element. You can put the "wide-div" outside an element with "row" and it should expand to take up the full width.
通常响应式元素、引导程序或基础，允许您添加“行”元素。您可以将“wide-div”放在带有“row”的元素之外，它应该展开以占据整个宽度。
Alternatively, you can use absolute positioning for that element which ignores most inherited settings:
或者，您可以对忽略大多数继承设置的元素使用绝对定位：
.wide-div {
position: absolute;
left: 0;
right: 0;
}
回答by aahhaa
You can use vw.
Demo http://jsfiddle.net/fsLhm6pk/
您可以使用vw. 演示http://jsfiddle.net/fsLhm6pk/
.parent {
width: 200px;
height: 200px;
background: red;
}
.child {
width: 100vw;
height: 50px;
background: yellow;
}<div class='parent'>
<div class='child'></div>
</div>You are right, this won't work with centered div. Try this instead:
你是对的，这不适用于 center div。试试这个：
EDIT http://jsfiddle.net/fsLhm6pk/1/
编辑http://jsfiddle.net/fsLhm6pk/1/
.parent {
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
.child {
width: 100%;
left: 0;
right: 0;
position: absolute;
height: 50px;
background: yellow;
}<div class='parent'>
<div class='child'></div>
</div>回答by Aximili
You can now do this
你现在可以这样做
.full-width {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
or this
或这个
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
More details: https://css-tricks.com/full-width-containers-limited-width-parents/
更多详情：https: //css-tricks.com/full-width-containers-limited-width-parents/
回答by Altimus Prime
I'm a little surprised no one offered the following in the last 4 years. The css position:fixedproperty pulls the item out and scales it in relation to the window. There are some cases where maybe this doesn't work, but if you're Javascripting a modal box or something, this works fine.
我有点惊讶在过去的 4 年里没有人提供以下内容。cssposition:fixed属性将项目拉出并相对于窗口进行缩放。在某些情况下，这可能不起作用，但是如果您正在使用 Javascript 模态框或其他东西，这可以正常工作。
.wide-div{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%; // in case you need to cover the height as well
background-color:rgba(0,0,0,.8); //just so you can see the div is on top of your content
z-index:1; // you may need to adjust the index of your other elements as well
}
