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的宽度/位置？

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

Answer 1

诀窍是将标题包装在包装器中，然后修复标题在包装器中的位置。

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

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

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

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

1 个答案: