通常,为了防止任何正文内容在固定导航下面呈现,我将向body元素添加padding-top。
我不喜欢这个,因为我必须在身体填充,头部高度或两者上指定硬单位值,以确保它们匹配。我鄙视给标题一个硬编码的高度,然后每个断点的样式变得更加麻烦,特别是当我为一个公司网站建立时,他们的标题有不断变化的业务规则,不同的断点有不同的条件。
如何在不使用硬单位值的情况下使用不与主体内容重叠的动态大小固定标头?我对使用JavaScript,CSS不感兴趣。
以下是我所指的一个过于简化的示例:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fixed_menu
答案 0 :(得分:0)
在将来的CSS标准中,您可以将标题的高度设置为变量,并在padding-top
的{{1}}中使用它。
此时,您可以使用不同的CSS预处理器,如SCSS,SASS,PostCSS-cssnext来实现此目标。