你可以让一个比父母更大的子div没有位置绝对

Question

所以基本上我想做的是在页面上有一个或两个div大于其父div.通常我会重组整个网站,但这将是一项艰巨的任务.

我不希望它们位于绝对位置的原因是容器高度将被拧紧并且它将导致位置绝对值与某些div重叠.

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

Answer 1

是!

不仅如此,我们可以通过使用vw和更好地做到一个calc.

只需使用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>