Сделать заголовок и div высотой окна просмотра

Question

с небольшим количеством проблем. Я хочу страницу с заголовком с ее навигацией, а затем я хочу, чтобы остальная часть страницы была изображением, которое заполняет окно просмотра.

На данный момент у меня есть что-то вроде этого

<header id="header" class="header-default"> 
    ...nav items 
</header> 

<div id="contents"></div> 

В моем CSS, то я

#header.header-default{ 
    height: 100px; 
    padding-top:10px; 
    padding-bottom:10px; 
} 

#contents{ 
    background: url('images/home.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Тогда, наконец, у меня есть некоторые JavaScript, чтобы установить высоту содержимого.

jQuery(function() { 
    setHeight(); 

    jQuery(window).resize(function() { 
     setHeight(); 
    }); 
}); 

function setHeight() { 
    windowHeight = jQuery(window).innerHeight()-120; 
    jQuery('.home #contents').css('min-height', windowHeight); 
}; 

Теперь это вид работ, он подходит для видового экрана, как он должен это делать. Тем не менее, изображение человека, и оно отсекает верх своего лба. Есть ли способ сделать изображение идеальным? Если размер видового экрана не является вариантом из-за отношения (которое, как я думаю, происходит), то я не возражаю отображать его в обычном режиме.

Thanks

Answer 1

Сочетание background-size: cover и background-attachment: fixed является причиной проблемы. За исключением background-attachment: fixed может привести к снижению производительности при анимации, так как фон перекрашивается все время. Чтобы получить требуемый результат, используйте псевдоним из :: :: before с position: fixed - fiddle.

btw - таким образом вы также можете удалить сценарий изменения высоты, так как фон всегда 100% доступной высоты;

body::before { 
    display: block; 
    position: fixed; 
    top: 120px; /** so it will be under the header **/ 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: url('http://blog.homerealestate.com/wp-content/uploads/2010/04/Person.Ashley.jpg') no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    content:''; 
} 

#contents { 
    position: relative; 
    z-index: 10; /** above the background **/ 
} 

Answer 2

Ощущается как знакомая проблема. Я думаю, что это действительно несоответствие коэффициентов (изображение с видовым/содержащим элементом).

Если память служит, вы можете настроить с помощью прокладки, чтобы получить то, что вы хотите отобразить.

Заканчивать Flexible CSS Cover Images demo

Ключевой бит Николаса Галлахера есть:

Изменение этого значения обивка будет изменять соотношение сторон. Например, прокладка 25% приводит в пропорции 4: 1, прокладка 33,333% приводит к соотношением сторон 3: 1 и т.д.

Кроме того, предостережение, чтобы иметь в виду (хак , в конце концов):

Проблема с использованием этого аспекта хакерства состоит в том, что если элемент объявляет максимальную высоту, он не будет соблюден. Чтобы обойти это, взломать можно применить к псевдоэлементу.

Answer 3

background-attachment: fixed прикрепляет фоновое изображение относительно окна просмотра. Верхняя часть фонового изображения отображается ниже заголовка и обрезается.

Вы можете указать верхнюю смещение, так что фоновое изображение закрепляется под заголовком:

body { 
 
    margin: 0; 
 
    background: url(http://lorempixel.com/output/people-h-c-640-1096-7.jpg) center 120px/cover no-repeat fixed red; 
 
} 
 
#header { 
 
    height: 100px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
} 
 
contents { 
 
    min-height: calc(100vh - 120px); 
 
} 
 
#checkbox1:checked + div { 
 
    height: 1000px; 
 
}

<header id="header">Header</header> 
 
<div id="contents"> 
 
    <div>Content</div> 
 
    <label for="checkbox1">Increase content height</label> 
 
    <input type="checkbox" id="checkbox1"> 
 
    <div>Content</div> 
 
</div>