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

Question

我的页面上有一个固定的标题 div #header，它在开始滚动之前position: fixed;覆盖了主要内容 div 。最初移动到下面的一种解决方案是添加一个到. 但是，我的模板是响应式的，并且标题在不同的设备上会有不同的高度。有没有办法将css添加到低于20px的位置，而不依赖于实际的高度？#main #main#headermargin-top#main#main#header#header

Answer 1

为什么不使用 z-index 覆盖 header 和 padding-top:20px 的#main。

Answer 2

不幸的是，不，如果不在内容上使用 margin-top（或 padding-top），这在 css 中是不可能的，因为给标题 'position:fixed' 会将其从文档流中删除，因此页面不会知道它关于相对定位其下方的任何内容。

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

这是一个例子：http: //jsfiddle.net/CxqrY/

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

这将在页面加载时起作用，但在方向改变时不起作用。为此，您需要一个调整大小的功能：http: //jsfiddle.net/gSFYx/

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