宽度：100vw 元素中断位置：粘性答案

【问题标题】：width:100vw of element breaks position: sticky宽度：100vw 元素中断位置：粘性
【发布时间】：2022-12-23 01:56:47
【问题描述】：

我正在尝试将粘性元素拉伸到屏幕大小。我有以下 HTML

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  position: sticky;
  width: 100px;
  height: 100px;
  background: black;
}

<div class="header" />
<div class="large" />

问题是这有效，但元素没有拉伸。如果我将 width:100px 更改为 width:100vw，左侧的粘性会中断。所以好像我不能同时指定相对宽度和使用左侧的粘性？

【问题讨论】：

div 不是自闭标签。应该是<div></div>
@ninadepina 这不是问题，沙箱中的代码仍在运行，只是宽度不正确
这就是问题所在......你的标签不起作用，当正确使用 html 标签时它确实有效

标签： html css

【解决方案1】：

我有点困惑，这是你要找的吗？

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  position: sticky;
  width: 100vw;
  height: 100px;
  background: black;
}

<div class="header"></div>
<div class="large"></div>

【讨论】：

不，标题应该粘在左边