Html CSS位置：固定标题

我有一个带有

位置的固定标题：fixed

为什么它位于其他元素的顶部并隐藏它们，所以我必须将

填充

添加到

main。

因为

标题的高度因内容而异，由媒体查询设置的字体大小和填充不能像代码片段中那样为
填充使用固定值。是否有一种解决方案可以在不使用javascript的情况下改变
标题的高度


正文{
保证金：0；
填充：0；
}
标题{
背景颜色：灰色；
位置：固定；
宽度：100%；
}
主要{
填充顶部：80px；/*不好，因为它是固定的*/
}

例子
内容

如果你想保持固定的位置，没有Javascript是无法实现的。我建议不要使用position，而是尊重html层次结构。一旦滚动将其移出视口，将其设置为“固定”。这是最典型的调用方法，当您希望在高度可能变化的情况下使标题始终可见时。
如果要保持固定位置，不使用Javascript是无法实现的。我建议不要使用position，而是尊重html层次结构。一旦滚动将其移出视口，将其设置为“固定”。这是最典型的调用方法，当您希望在高度可能不同的情况下始终显示标题时。
正如其他人所说，没有javascript您无法做到这一点，但您可以使用flexbox和flex grow:1伪造固定标题；溢出y：滚动


*{margin:0；}
身体{
显示器：flex；
弯曲方向：立柱；
最大高度：100vh；
}
部分{
柔性生长：1；
溢出y：滚动；
}
主要{
背景：#eee；
最小高度：500vh；
}

例子
内容

页脚

正如其他人所说，没有javascript你无法做到这一点，但你可以使用flexbox和
flex grow:1伪造一个固定的标题；溢出y：滚动


*{margin:0；}
身体{
显示器：flex；
弯曲方向：立柱；
最大高度：100vh；
}
部分{
柔性生长：1；
溢出y：滚动；
}
主要{
背景：#eee；
最小高度：500vh；
}

例子
内容

页脚

使用80px的“em”等效值将解决与字体大小相关的问题。是的，但不会解决其他问题。想象一下，你永远不知道
标题的高度。我想，由于
位置的性质，没有纯粹的css方法可以做到这一点：固定的
。使用'em'等效值80px可以解决与字体大小相关的问题。是的，但不能解决其他问题。想象一下，你永远不知道
页眉的高度。我想，由于
位置的性质，没有纯粹的css方法可以做到这一点：固定的
。这能与
部分后的粘性页脚结合起来吗？我也使用了flexbox，但随着您的更改，它将不再工作。请参阅@Kiltarc，您可以使用页脚，其行为类似于页眉。更新了我的答案。这能否与
部分后的粘性页脚结合使用？我也使用了flexbox，但随着您的更改，它将不再工作。请参阅@Kiltarc，您可以使用页脚，其行为类似于页眉。更新了我的答案。