可以在相对位置有限的 div 内设置 100% 的屏幕宽度吗？

Question

我想知道是否可以将 div 延伸到 100vw，同时 在 relative 中父级 div 宽度有限。并且在这个过程中也不会丢失它在文档中的高度，就像将位置设置为绝对时那样。

纯css可以吗？还是我需要一些 jQuery / JS？

body {
  background: #f0f0f0;
  text-align: center;
}

.parent {
  max-width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  background: white;
}

p {
  padding: 20px;
}

#banner {
  padding: 20px;
  background: black;
  color: white;
}

<div class="parent">
  <p>My relative parent container,<br>with a fixed width.</p>
  <div id="banner">
    My full width banner
  </div>
  <p>...</p>
</div>

任何人都有让这个工作的经验吗？非常感谢任何和所有提示。谢谢！

Answer 1

是的，您可以使用 100vw 宽度。要更正位置，您可以添加 margin-left: calc(-50vw + 50%);，这会将它向左移动屏幕宽度的一半，然后向右移动其自身宽度的 50%，从而再次 "centering" 它，在这个case 生成一个全角元素：

body {
  background: #f0f0f0;
  text-align: center;
}

.parent {
  max-width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  background: white;
}

p {
  padding: 20px;
}

#banner {
  padding: 20px;
  background: black;
  color: white;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

<div class="parent">
  <p>My relative parent container,<br>with a fixed width.</p>
  <div id="banner">
    My full width banner
  </div>
  <p>...</p>
</div>

但是还有一个问题：一旦内容长于 window 高度，就会出现水平滚动条。我之前在 this question 中提出过这个问题，但我还没有真正找到解决方案或得到令人满意的答案。

Answer 2

我使用 relative 与 margin 和 left right 来实现这个

body {
  background: #f0f0f0;
  text-align: center;
  overflow: hidden;
}

.parent {
  max-width: 300px;
  height: 300px;
  margin: auto;
  position: relative;
  background: white;
}

p {
  padding: 20px;
}

#banner {
  padding: 20px;
  background: black;
  color: white;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

<div class="parent">
  <p>My relative parent container,<br>with a fixed width.</p>
  <div id="banner">
    My full width banner
  </div>
  <p>...</p>
</div>

Reference

可以在相对位置有限的 div 内设置 100% 的屏幕宽度吗？

Possible to have 100% screen width inside limited div with relative position?

javascript

css

jquery

responsive-design