Question

我有一个div，其最大宽度为let，如1024px，我有它的孩子需要从屏幕左边开始占据100％的宽度。

是否可以在不引入额外标记的情况下进行？据我所知，可以让孩子100％宽度：100vw;但似乎无法向左推。

HTML

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

CSS

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

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

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;
}

Answer 2

你可以使用绝对定位的伪元素来做到这一点。我不得不添加一个隐藏溢出的包装器，否则添加了水平滚动。有人可能能够弄清楚如何使用包装器来完成它。

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

＆＃13;

.wrapper {
  overflow:hidden;
  margin-top:40px;
}

.parent {
  max-width: 800px;
  margin: 0 auto;
}

.child {
  margin-top: 20px;
  padding: 20px;
  width: 100%;
  background: grey;
  position:relative;
}

.child:before, .child:after {
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:100%;
  background:grey;
}
.child:before {
  left:-100%;
}
.child:after {
  right:-100%;
}

＆＃13;

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

＆＃13;

Answer 3

是否可以在不引入额外标记的情况下进行？据我所知，可以让孩子100％宽度：100vw;但似乎无法向左推。

你想向左推？子元素？如果是这样，父母有margin-left：auto和margin-right：auto（速记margin：0 auto）。因此，您将父元素居中，因此子元素随之而来。

您可能想要使用margin: 0;。

在非100％宽度父级中显示100％宽度的子级

3 个答案: