CSS 使 div 100% 宽度与 body 相关，而不是它的父 div答案

【问题标题】：CSS make div 100% width relevant to body and not it's parent divCSS 使 div 100% 宽度与 body 相关，而不是它的父 div
【发布时间】：2018-04-04 07:52:56
【问题描述】：

我有

<div style="position:relative; width:500px;">
    <div style="position:absolute; width:100%"></div>
</div>

子 div 占其父 div 的 100% 宽度。有没有办法可以强制它占用 100% 的身体宽度，而不是父 div。相对和绝对定位都是必需的，因为我在上面的代码中有它。

【问题讨论】：

如果没有对 CSS 进行 JS 更新，我认为您只能对固定元素执行此操作 position: fixed; :(
我认为没有办法让子 div 采用 body 的宽度，因为它继承自父级。但是，可能有一种方法可以实现您想要的。你能更详细地解释你想要达到的目标吗？一个 jsfiddle 也会有所帮助。

标签： html css width

【解决方案1】：

在保持代码中的相对和绝对定位的同时做到这一点的唯一方法是使用 JavaScript。您需要获取窗口宽度并将其设置为 div 宽度。您还需要在调整大小时检测窗口大小，以便始终将 div 调整设置为当前窗口宽度。

您可以执行此操作的其他 2 种方法可能不是选项，但值得一提

将子 div 放在父 div 之外。
或将其设置为固定位置。这样做可能不会产生理想的效果。无论页面滚动如何，div 都将始终位于同一位置。

【讨论】：

【解决方案2】：

现代浏览器有support 对应viewport units。

header {
    width: 50%;
    background-color: lightblue;
    padding: 20px 0;
}

nav {
    width: 100vw;
    background-color: orange;
    padding: 20px 0;
}

  <html>
  <body>
  
  <header>
    <p>This inherits the width of the parent like normal.</p>
    
    <nav>
      <a href="/">this fills the viewport</a>
    </nav>
  </header>
  
  </body>
  </html>

【讨论】：