html - 在非 100% 宽度的父级中显示 100% 宽度的子级

Question

我有一个最大宽度为 1024px 的 div，我的子元素需要从屏幕左侧开始占用 100% 的宽度。

是否可以不引入额外的标记？我知道可以使宽度为 100% 的 child 100%；但似乎无法将其推向左侧。

代码

.parent {
  max-width: 800px;
  margin: 0 auto;
}

.child {
  margin-top: 20px;
  padding: 20px;
  width: 100vw;
  background: grey;
}

<div class="parent">
  <a href="#" class="toggle">Toggle content</a>
  <div class="child">Content</div>
</div>

https://codepen.io/anon/pen/QgbPJj

Answer 1

这有效。

.child {
  position: absolute;
  margin-top: 20px;
  padding: 20px;
  width: 100vw;
  background: grey;
  left: 0;
  box-sizing: border-box;
}