Фиксированный заголовок первоначально накладками основное содержание

Question

У меня есть DIV фиксированного заголовка #header с position: fixed; на моей странице, которая в настоящее время накладками основного содержимого DIV #mainперед началом прокрутки. Одно решение для первоначального перемещения #main ниже #header должно было бы добавить margin-top в #main. Тем не менее, мой шаблон реагирует, и заголовок будет иметь разную высоту на разных устройствах. Есть ли способ добавить css в #main, чтобы сидеть 20px ниже #header независимо от того, насколько высока #header на самом деле?

Answer 1

Почему бы не использовать z-index для наложения заголовка и верхнего слоя: 20px для #main.

Answer 2

К сожалению нет, это невозможно в css без использования верхнего края (или верхнего слоя) на контенте, потому что предоставление позиции заголовка: fixed устраняет его из потока документа, поэтому страница выиграла ' t знать об этом относительно относительно позиционирования любого содержания ниже этого.

Решение этой проблемы будет состоять в том, чтобы вычислить высоту заголовка на загрузке страницы и добавить это значение в начало main.

Вот пример того, что: 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); 
});