Html 如果没有绝对位置，可以使子div大于父div吗

因此，基本上我想做的是在一个页面上有一个或两个div，这个div比它的父div大。通常我会重组整个网站，但这将是一个很大的任务

我不希望它们是绝对位置的原因是容器高度将被拧紧，这将导致绝对位置重叠一些div

两个div大于其父div的原因是，当容器div不能大于1200px时，它们必须是浏览器的宽度。

是！ 不仅如此，我们还可以使用

vw

和

calc

做得更好

只需使用

vw

（百分比视口单位）将子元素的宽度设置为视口宽度的100%，然后将其左边距设置为基于此计算的负值，减去包装的宽度。除了父级的可选

最大宽度

，其他所有内容都将自动计算。您可以动态更改父容器的宽度，子容器将根据需要自动调整大小和对齐，而无需定位

body，
html，
.家长{
身高：100%；
宽度：100%；
文本对齐：居中；
填充：0；
保证金：0；
}
.家长{
宽度：50%；
最大宽度：800px；
背景：灰色；
保证金：0自动；
位置：相对位置；
}
.孩子{
宽度：100vw；/*您也可以使用边距来实现这一点：

试试这把小提琴


.wrapper{
宽度：400px；
边框：1px实心#f00；
最小高度：153px；
}
.1-child-1{
浮动：左；
边框：1px实心#ccc；
宽度：195%；
最小高度：262px；
}
非常好的解决方案，正是我想要的。你用这个优雅的解决方案为我省去了很多麻烦。兄弟，你帮了大忙。你不知道你解决了我多少大麻烦。非常感谢。很好的解决方案。糟糕的是，这个答案比这里的“绝对位置”答案不受欢迎（视图、投票…）
div{
outline: 2px solid red;
}
#outer{
width: 200px;
height: 400px;
}
#inner{
width: 600px;
height: 200px;
margin: 0 -20px;
outline: 1px solid green;
}

.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>