CSS：位置 = 固定，高度 = 自动

Question

我有一个页面的滚动标题位置固定。类似于 StackOverflow 顶部菜单。

我需要使用 height = auto 因为我可以单行或多行显示信息。如果我使用了两行或更多行，则我的标题会显示在页面的主要文本上。

我可以用 JS 脚本通过设置 body margin-top = header width 来解决这个问题。

我如何才能在没有 JS 的 CSS 上解决这种情况？

Answer 1

我不认为它可以纯粹用 CSS 来完成。带有position: fixed 的元素被从正常的页面流中取出，因此它们不用于计算页面上其他元素的位置。

我想你可以渲染两个标题，一个带有position: fixed，另一个没有这样的声明（可能带有“活动”页面元素，如链接、输入字段或按钮替换为静态文本），仅用于移动其他页面元素向下。不过，那将是一个可怕的 hack。