Html 有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5581034/
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
Is there are way to make a child DIV's width wider than the parent DIV using CSS?
提问by Camsoft
Is there a way to have a child DIV within a parent container DIV that is wider than it's parent. The child DIV needs to be the same width of the browser viewport.
有没有办法在比父容器更宽的父容器 DIV 中创建子 DIV。子 DIV 需要与浏览器视口的宽度相同。
See example below:
请参阅下面的示例：
The child DIV muststay as a child of the parent div. I know I can set arbitrary negative margins on the child div to make it wider but I can't work out how to essentially make it 100% width of the browser.
子 DIV必须保持为父 div 的子级。我知道我可以在子 div 上设置任意负边距以使其更宽，但我无法弄清楚如何基本上使它成为浏览器的 100% 宽度。
I know I can do this:
我知道我可以这样做：
.child-div{
margin-left: -100px;
margin-right: -100px;
}
But I need the child to be the same width as the browser which is dynamic.
但我需要孩子与动态浏览器的宽度相同。
Update
更新
Thanks for your answers, it seems the closest answer so far is to make the child DIV position: absolute, and set the left and right properties to 0.
感谢您的回答，目前看来最接近的答案是使子 DIV 位置：绝对，并将左右属性设置为 0。
The next problem I have is that the parent has position: relative, which means that left and right properties are still relative to the parent div and not the browser, see example here: jsfiddle.net/v2Tja/2
我遇到的下一个问题是父级有 position:relative，这意味着左右属性仍然相对于父级 div 而不是浏览器，请参见此处的示例：jsfiddle.net/v2Tja/2
I can't remove the position relative from the parent without screwing everything else up.
我无法在不搞砸其他一切的情况下从父级中删除相对位置。
采纳答案by Blowsie
Use absolute positioning
使用绝对定位
.child-div {
position:absolute;
left:0;
right:0;
}
回答by Nils Kaspersson
Here's a generic solution that keeps the child element in the document flow:
这是将子元素保留在文档流中的通用解决方案：
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
We set the widthof the child element to fill the entire viewport width, then we make it meet the edge of the screen by moving it to the leftby a distance of half the viewport, minus 50% of the parent element's width.
我们将width子元素的 设置为填充整个视口宽度，然后通过将其移动到left视口一半的距离，减去父元素宽度的 50%，使其与屏幕边缘相交。
Demo:
演示：
* {
box-sizing: border-box;
}
body {
margin: 0;
overflow-x: hidden;
}
.parent {
max-width: 400px;
margin: 0 auto;
padding: 1rem;
position: relative;
background-color: darkgrey;
}
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
height: 100px;
border: 3px solid red;
background-color: lightgrey;
}<div class="parent">
Pre
<div class="child">Child</div>
Post
</div>Browser support for vwand for calc()can generally be seen as IE9 and newer.
浏览器对vw和calc() 的支持通常可以看作是 IE9 和更新版本。
Note:This assumes the box model is set to border-box. Without border-box, you would also have to subtract paddings and borders, making this solution a mess.
注意：这假设盒模型设置为border-box。没有border-box，您还必须减去填充和边框，使此解决方案变得一团糟。
Note:It is encouraged to hide horizontal overflow of your scrolling container, as certain browsers may choose to display a horizontal scrollbar despite there being no overflow.
注意：鼓励隐藏滚动容器的水平溢出，因为某些浏览器可能会选择显示水平滚动条，尽管没有溢出。
回答by dangom
I've searched far and wide for a solution to this problem for a long time. Ideally we want to have the child greater than the parent, but without knowing the constraints of the parent in advance.
很长一段时间以来，我一直在广泛地寻找解决此问题的方法。理想情况下，我们希望孩子大于父母，但事先不知道父母的约束。
And I finally found a brilliant generic answer here. Copying it verbatim:
我终于在这里找到了一个绝妙的通用答案。逐字复制：
The idea here is: push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with negative -50vw margin.
这里的想法是：用 left: 50%; 将容器推到浏览器窗口的正中间，然后用负 -50vw 边距将其拉回左边缘。
.child-div {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
回答by Austeroid
Based on your suggestion original suggestion (setting negative margins), I have tried and come up with a similar method using percentage units for dynamic browser width:
根据您的建议原始建议（设置负边距），我尝试并提出了一种使用百分比单位动态浏览器宽度的类似方法：
HTML
HTML
<div class="grandparent">
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
</div>
</div>
</div>
CSS:
CSS：
.child-div{
margin: 0 -100%;
padding: 0 -100%;
}
.parent {
width: 60%;
background-color: red;
margin: 0 auto;
padding: 50px;
position:relative;
}
.grandparent {
overflow-x:hidden;
background-color: blue;
width: 100%;
position:relative;
}
The negative margins will let the content flow out of the Parent DIV. Therefore I set the padding: 0 100%;to push the content back to the original boundaries of the Chlid DIV.
负边距将使内容流出父 DIV。因此我设置了padding: 0 100%;将内容推回到 Chlid DIV 的原始边界。
The negative margins will also make the .child-div's total width expands out of the browser's viewport, resulting in a horizontal scroll. Hence we need to clip the extruding width by applying an overflow-x: hiddento a Grandparent DIV (which is the parent of the Parent Div):
负边距也会使 .child-div 的总宽度扩展到浏览器的视口之外，从而导致水平滚动。因此，我们需要通过将 anoverflow-x: hidden应用于祖父 DIV（它是父 Div 的父级）来裁剪挤压宽度：
Here is the JSfiddle
这是JSfiddle
I haved tried Nils Kaspersson's left: calc(-50vw + 50%); it worked perfectly fine in Chrome & FF (not sure about IE yet) until I found out Safari browsers doesn't do it properly. Hope they fixed this soon as I actually like this simple method.
我试过 Nils Kaspersson 的left: calc(-50vw + 50%)；它在 Chrome 和 FF 中运行良好（还不确定 IE），直到我发现 Safari 浏览器无法正常运行。希望他们尽快解决这个问题，因为我真的很喜欢这个简单的方法。
This also may resolve your issue where the Parent DIV element has to be position:relative
这也可以解决您的问题，即父 DIV 元素必须是 position:relative
The 2 drawbacks of this workaround method is:
这种变通方法的两个缺点是：
- Require extra markup (i.e a grandparent element (just like the good ol' table vertical align method isn't it...)
- The left and right border of the Child DIV will never show, simply because they are outside of the browser's viewport.
- 需要额外的标记（即祖父元素（就像好的 ol' table 垂直对齐方法不是......）
- Child DIV 的左右边框永远不会显示，因为它们在浏览器的视口之外。
Please let me know if there's any issue you find with this method ;). Hope it helps.
如果您发现此方法有任何问题，请告诉我；)。希望能帮助到你。
回答by Markus
Flexboxcan be used to make a child wider than its parent with three lines of CSS.
Flexbox可用于通过三行 CSS 使子项比其父项更宽。
Only the child's display, margin-leftand widthneed to be set. margin-leftdepends on the child's width. The formula is:
只有孩子的display，margin-left并且width需要进行设置。margin-left取决于孩子的width。公式为：
margin-left: calc(-.5 * var(--child-width) + 50%);
CSS variables can be used to avoid manually calculating the left margin.
CSS 变量可用于避免手动计算左边距。
Demo #1: Manual calculation
演示 #1：手动计算
.parent {
background-color: aqua;
height: 50vh;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
.child {
background-color: pink;
display: flex;
}
.wide {
margin-left: calc(-37.5vw + 50%);
width: 75vw;
}
.full {
margin-left: calc(-50vw + 50%);
width: 100vw;
}<div class="parent">
<div>
parent
</div>
<div class="child wide">
75vw
</div>
<div class="child full">
100vw
</div>
</div>Demo #2: Using CSS variables
演示 #2：使用 CSS 变量
.parent {
background-color: aqua;
height: 50vh;
margin-left: auto;
margin-right: auto;
width: 50vw;
}
.child {
background-color: pink;
display: flex;
margin-left: calc(-.5 * var(--child-width) + 50%);
width: var(--child-width);
}
.wide {
--child-width: 75vw;
}
.full {
--child-width: 100vw;
}<div class="parent">
<div>
parent
</div>
<div class="child wide">
75vw
</div>
<div class="child full">
100vw
</div>
</div>回答by hsuastegui
I used this:
我用过这个：
HTML
HTML
<div class="container">
<div class="parent">
<div class="child">
<div class="inner-container"></div>
</div>
</div>
</div>
CSS
CSS
.container {
overflow-x: hidden;
}
.child {
position: relative;
width: 200%;
left: -50%;
}
.inner-container{
max-width: 1179px;
margin:0 auto;
}
回答by A-Zone
Adding to Nils Kaspersson's solution, I am resolving for the width of the vertical scrollbar as well. I am using 16pxas an example, which is subtracted from the view-port width. This will avoid the horizontal scrollbar from appearing.
添加到 Nils Kaspersson 的解决方案中，我也在解决垂直滚动条的宽度。我16px以一个例子为例，它是从视口宽度中减去的。这将避免出现水平滚动条。
width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));
回答by Khurram Ijaz
you can try position: absolute. and give width and height , top: 'y axis from the top' and left: 'x-axis'
你可以试试位置：绝对。并给出 width 和 height , top: 'y axis from the top' 和 left: 'x-axis'
回答by Nabil Kadimi
Assuming the parent has a fixed width, e.g #page { width: 1000px; }and is centered #page { margin: auto; }, you want the child to fit the width of browser viewport you could simply do:
假设父级具有固定宽度，例如#page { width: 1000px; }并且居中#page { margin: auto; }，您希望子级适合浏览器视口的宽度，您可以简单地执行以下操作：
#page {
margin: auto;
width: 1000px;
}
.fullwidth {
margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
width: 100vw;
}
回答by Seika85
I had a similar issue. The content of the child element was supposed to stay in the parent element while the background had to extend the full viewport width.
我有一个类似的问题。子元素的内容应该保留在父元素中，而背景必须扩展整个视口宽度。
I resolved this issue by making the child element position: relativeand adding a pseudo element (:before) to it with position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;.
The pseudo element stays behind the actual child as a pseudo background element. This works in all browsers (even IE8+ and Safari 6+ - don't have the possibility to test older versions).
我通过创建子元素position: relative并:before使用position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. 伪元素作为伪背景元素留在实际子元素之后。这适用于所有浏览器（甚至 IE8+ 和 Safari 6+ - 无法测试旧版本）。
Small example fiddle: http://jsfiddle.net/vccv39j9/
小例子小提琴：http: //jsfiddle.net/vccv39j9/
