Css 固定标题最初覆盖主要内容

我有一个固定的标题div

#标题

，位置：固定#main的我的页面上的code>。最初将

#main

移动到

#标题

下方的一个解决方案是在

#main

中添加一个

边距顶部

。但是，我的模板响应迅速，标题在不同的设备上具有不同的高度。有没有一种方法可以将css添加到

#main

中，使其位于

#header

下方20px，而与

#header

的实际高度无关？

为什么不使用z-index覆盖header并填充top:20px作为#main.

不幸的是，在css中，如果不使用边距top（或填充top），这是不可能的在内容上，因为给出标题“position:fixed”会将其从文档流中移除，因此页面将不知道该标题下的任何内容的相对位置

这个问题的jQuery解决方案是计算页面加载时标题的高度，并将该值添加到主标题的顶部

下面是一个例子：

这将在加载页面时起作用，但如果方向发生变化则不起作用。为此，您需要一个调整大小功能：

---

您可以使用jQuery在页面加载时获取页眉的高度，然后将该值作为页眉顶部的边距应用于主页眉。一个问题，如果标题在不同的设备上具有不同的高度，您是要以不同的宽度指定高度，还是要通过其子项的高度总和来定义标题高度？标题包含一组内联块，因此，它的子代将开始堆叠。在宽屏幕设备上，标题的高度可能为10px；在这种情况下，您的解决方案将起作用。但在狭窄的设备上，标题子项可能开始堆叠，从而将标题高度增加到（比如）30px。在这种情况下，我会隐藏10px的主要内容。

$(document).ready(function(){
    var height = $('.header').height();
    $('.main').css('padding-top', height);
});

$(window).resize(function() {
    var height = $('.header').height();
    $('.main').css('padding-top', height);
});