获取 div 固定位置以填充宽度

Question

我有以下设置：

<div id='sidebar'></div>
<div id='header'></div>
<div id='content'>Hello World</div>

#sidebar {
  float: left;
}
#sidebar ~ * {
  overflow: hidden;
}

这使得#sidebar将#header和#content推到右边，然后#header和#content占据了全宽。

我想做的是将页眉固定在屏幕顶部，这样侧边栏会继续将它推到右侧，但在滚动时它仍保持在屏幕顶部。

我天真的尝试只是设置 #header { position: fixed }。这是行不通的；它会导致 #header 的宽度根据其子项自动计算。

然后我添加#header { width: 100% }。这更近了；宽度填满屏幕，但没有被 #sidebar 推到右边。添加 float: left 也无济于事。

我的限制是：

我无法控制 #content，也无法将其放入我控制的任何其他标签中
不知道#sidebar有多宽

我可以用 CSS 来计算 Javascript 中 #sidebar 的 width/location 吗？

https://jsfiddle.net/vkL4s5Lz/1/

Answer 1

诀窍是将 header 包裹在包装器中，然后固定 header 在包装器中的位置。

<div>
  <div id='header'></div>
</div>

header {
  position: fixed;
  width: 100%;
}

https://jsfiddle.net/vkL4s5Lz/2/

获取 div 固定位置以填充宽度

Get div with fixed position to fill up width

html

css

css-position