Question

我的页面上有#header的固定标题div position: fixed;，目前在开始滚动之前覆盖主要内容div #main 。最初将#main移至#header以下的一种解决方案是向margin-top添加#main。但是，我的模板是响应式的，标题在不同的设备上会有不同的高度。有没有办法将{c}添加到#main以保持低于#header 20px独立于#header实际上有多高？

Answer 1

为什么不使用z-index覆盖标题和填充顶部：#main为20px。

Answer 2

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

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

以下是一个示例：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);
});

固定标头最初覆盖主要内容

2 个答案: