html - CSS 使 div 100% 宽度与主体相关,而不是它的父 div

标签 html css width

我有

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

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

最佳答案

现代浏览器有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>

关于html - CSS 使 div 100% 宽度与主体相关,而不是它的父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7948305/

相关文章:

html - 父级中的最后一个元素 - margin 没有生效?

javascript - 使用 Gulp 处理 css 文件时如何修复图像 url?

php - HTML 表格的 CSS 宽度问题

html - 以 % 设置元素高度

html - html 表格行中间隔均匀/可扩展的单元格

html - header 元素没有响应

javascript - 无法加载 base64 图像

html - 在 R 中使用 `read_html` 使用 `rvest` 时缺少元素

css - 如何重置::选择的背景颜色

c# - 绑定(bind)到 ScrollViewer 的 ViewportWidth 和 ViewportHeight