Здравствуйте.
Наверное каждый верстальщик сталкивался с такой проблемой, когда у сайта которого он верстает есть необъятный фон выполненный с разных иллюстраций. Притом иллюстрации не на всю высоту, а только в хедере и футере. Тоесть у вас появлялась задача, чтоб независимо от контента фоновые рисунки были намертво прикреплены к хедеру и футеру.
Это сделать не так уж сложно, просто нужно чтоб главный 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 с классом content должен быть растянут на всю высоту браузера не зависимо от контента и тянутся при его надмерном количестве.
Как я не старался это сделать у меня ничего не получалось.
Но экспериментируя, я пришел к такому варианту, что если не вкладывать div с классом content в остальные дивы, а росположить их попорядку с последующим колдовством в css, то всё начинает работать.
И так всё попорядку:
1 шаг:
Меняем структуру (выносим все блоки):
2 шаг:
Всем блокам которые «как бы» должны быть родителями div`а с классом content, задаем position: absolute. А значению height мы присваеваем auto. Также мы к ним дописываем: min-height: 100%.
Потом мы просто позиционируем их согласно нашему дизайну, и по средствам z-index выставляем видимость этих блоков.
В итоге мы добьемся нашего результата.
Наверное каждый верстальщик сталкивался с такой проблемой, когда у сайта которого он верстает есть необъятный фон выполненный с разных иллюстраций. Притом иллюстрации не на всю высоту, а только в хедере и футере. Тоесть у вас появлялась задача, чтоб независимо от контента фоновые рисунки были намертво прикреплены к хедеру и футеру.
Это сделать не так уж сложно, просто нужно чтоб главный 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 выставляем видимость этих блоков.
В итоге мы добьемся нашего результата.