寬度：100vw 元素中斷位置：粘性

Question

我正在嘗試將粘性元素拉伸到屏幕大小。 我有以下 HTML

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

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

問題是這有效，但元素沒有拉伸。 如果我將width:100px更改為width:100vw ，左側的粘性會中斷。 所以好像我不能同時指定相對寬度和使用左側的粘性？

Answer 1

您可以通過在兩個元素周圍添加一個div並為該div提供一個display: inline-block;來實現這一點。 :

 .container { display: inline-block; }.large { height: 200vw; width: 200vw; }.header { left: 0; top: 0; position: sticky; width: 100vw; height: 100px; background: black; }

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