Html 你可以在没有绝对位置的情况下使子 div 大于父 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20214735/
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
Can you make a child div larger than parent without position absolute
提问by Rambomst
So basically what I want to do is have a div or two on a page that is larger than its parent div. Normally I would restructure the whole website however that would be a large task.
所以基本上我想要做的是在一个大于其父 div 的页面上有一两个 div。通常我会重组整个网站，但这将是一项艰巨的任务。
The reason I don't want them to be position absolute is that the container heights will then be screwed up and it will cause the position absolutes to overlap some divs.
我不希望它们是绝对位置的原因是容器高度会被搞砸，这会导致绝对位置与某些 div 重叠。
The reason for the two divs being larger than their parent divs is they must be the width of the browser when the container divs can be no larger than 1200px.
两个div比它们的父div大的原因是当容器div不能大于1200px时，它们必须是浏览器的宽度。
回答by SW4
Yes!
是的！
Not only that, we can do one better by using vwand calc.
不仅如此，我们还可以通过使用vw和 来做得更好calc。
Simply set the width of the child elements to be 100% of the viewport width by using vw(percentage viewport units), and then set their left margin to a negative calculated value based on this, minus the width of the wrapper. Other than the optional max-widthof the parent, everything else is calculated automatically. You can dynamically change the width of the parent container, and the children will automatically resize and align as needed, without being positioned.
只需使用vw（百分比视口单位）将子元素的宽度设置为视口宽度的 100% ，然后将它们的左边距设置为基于此的负计算值，减去包装器的宽度。除了max-width父母的可选之外，其他一切都是自动计算的。可以动态改变父容器的宽度，子容器会根据需要自动调整大小和对齐，无需定位。
body,
html,
.parent {
height: 100%;
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
.parent {
width: 50%;
max-width: 800px;
background: grey;
margin: 0 auto;
position: relative;
}
.child {
width: 100vw;/* <-- children as wide as the browser window (viewport) */
margin-left: calc(-1 * ((100vw - 100%) / 2));/* align left edge to the left edge of the viewport */
/* The above is basically saying to set the left margin to minus the width of the viewport MINUS the width of the parent, divided by two, so the left edge of the viewport */
height: 50px;
background: yellow;
}<div class='parent'>
parent element
<div class='child'>child element</div>
</div>回答by Pat Dobson
You can also use margins to achieve this: http://jsfiddle.net/MEc7p/1/
您还可以使用边距来实现这一点：http: //jsfiddle.net/MEc7p/1/
div{
outline: 2px solid red;
}
#outer{
width: 200px;
height: 400px;
}
#inner{
width: 600px;
height: 200px;
margin: 0 -20px;
outline: 1px solid green;
}
回答by stanze
Try this fiddle
试试这个小提琴
http://jsfiddle.net/stanze/g2SLk/
http://jsfiddle.net/stanze/g2SLk/
.wrapper {
width: 400px;
border: 1px solid #f00;
min-height: 153px;
}
.wrapper-child-1 {
float: left;
border: 1px solid #ccc;
width: 195%;
min-height: 262px;
}
<div class="wrapper">
<div class="wrapper-child-1"> </div>
</div>
