Проблемы с фоновыми картинками на всю высоту браузера

3 Мар
2012

Здравствуйте.

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


Это сделать не так уж сложно, просто нужно чтоб главный div-родитель вашего сайта, растягивался на всю высоту браузера независимо от контента.

Для этого нужно сначала указать:

html,
body{
height: 100%;
}

Потом div`у-родителю указать высоту 100%.

.main{
height:100%;
}

и ему же, обязательно нужно указать:

html>body .main {height: auto; min-height: 100%; }

Потом ту картинку, что в хедере вы задаете фоном body и по средствам background-repeat и background-position, выставляете ее чтоб она была строго пришита к верху и была по середине экрана (top center), и не повторялась (no-repeat).

Пример:

body{

background: url(ваша_картинка) no-repeat top center;

или

background-image: url(ваша_картинка);
background-repeat: no-repeat;
background-position: top center;

}

Следующим вашим шагом будет прикрепить фоновую картинку к подвалу (футеру).
Переходим к диву с классом main.
Ваши действия будут абсолютно идентичны предыдущиму за исключением background-position, которому вы должны задать bottom center, тоесть отцентрировать картинку и пришить ее к подвалу (футеру).

.main{

background: url(ваша_картинка) no-repeat top center;

или

background-image: url(ваша_картинка);
background-repeat: no-repeat;
background-position: bottom center;

}

Так вы добьетесь до того, что у вас картинки будут находится строго вверху и внизу окна браузера.

Но вот, что делать если в нашем теле сайта появился блок который тоже должен быть на всю высоту окна?

Если мы непосредственно укажем ему через:

html>body.внутренний_блок {height: auto; min-height: 100%; }

То этот блок будет растягиваться на всю высоту, а вот его блоки родители «зависнут» только на высоте окна браузера, тоесть если контента будет на пару экранов, то фон будет распространятся только на первый экран.

Как поступить в это ситуации? Я долго думал, экспериментировал, но обычно я терпел неудачи. Постоянно блоки нехотели меня слушать, вылазили один из-за одного.

Но пару дней назад, мои эксперименты закончились успехом. Теперь я хочу поделится с вами, и услышать ваши мнения.

Давайте допустим, что у нас есть вот такая структура:

<div class="main">
    <div class="header"></div>
        <section>
    	    <div>
	        <div class="content">
	            <p>
	                   текст
	            </p>
	        </div>
	    </div>
	</section>
    <div class="footer"></div>
</div>

Есть задача:

Футер должен быть прикреплён к низу, а div с классом content должен быть растянут на всю высоту браузера не зависимо от контента и тянутся при его надмерном количестве.

Как я не старался это сделать у меня ничего не получалось.

Но экспериментируя, я пришел к такому варианту, что если не вкладывать div с классом content в остальные дивы, а росположить их попорядку с последующим колдовством в css, то всё начинает работать.

И так всё попорядку:

1 шаг:

Меняем структуру (выносим все блоки):

<div class="main">
    <div class="header"></div>
    <section></section>
    <div></div>
    <div class="content">
            <p>
                текст
            </p>
    </div>
    <div class="footer"></div>
</div>

2 шаг:

Всем блокам которые «как бы» должны быть родителями div`а с классом content, задаем position: absolute. А значению height мы присваеваем auto. Также мы к ним дописываем: min-height: 100%.

Потом мы просто позиционируем их согласно нашему дизайну, и по средствам z-index выставляем видимость этих блоков.

В итоге мы добьемся нашего результата.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх