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

Posted 2023-05-08

【中文标题】相对位置有限的 div 内可能有 100% 的屏幕宽度吗？

【英文标题】：Possible to have 100% screen width inside limited div with relative position?

【发布时间】：2020-05-27 12:14:18

【问题描述】：

我想知道是否可以将 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>

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

【参考方案1】：

是的，您可以使用 100vw 宽度。要更正该位置，您可以添加margin-left: calc(-50vw + 50%);，它将屏幕宽度的一半向左移动，然后将其自身宽度的 50% 向右移动，从而再次“居中”它，在这种情况下会导致全角元素：

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>

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

【讨论】：

Aahhh... 如此优雅而简单的解决方案。非常感谢@Johannes！ :) 水平滚动条太糟糕了。

我看了你的帖子，很有趣！我想在找到更好的解决方案之前，我只会打广告bodyoverflow-x: hidden。

添加此代码笔作为附加参考：codepen.io/bassplayer7/pen/egZKpm。如果使用一些 javascript 提供解决方案。

@TVBZ 你在那里制作的补丁非常酷——感谢分享！虽然我真的很想为这个问题找到一个纯 CSS 的解决方案（但这可能是不可能的），但这是解决这个问题的好方法。

一些功劳归于作者@bassplayer7 offcourse :) 我也更喜欢纯 css。但就目前而言，这将不得不这样做:)

【参考方案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

【讨论】：

这也是一种有趣而优雅的方法。它与约翰内斯的例子具有相同的结果。你通过设置overflow-x: hidden来隐藏水平滚动条？或者您对此有何其他建议？

@TVBZ 是的，我同意，body 和 html 不需要滚动