Заметил, что в интернете встречается довольно часто вопрос о том, как растянуть блок по высоте экрана. То есть чтобы он полностью заполнил все пространство вне зависимости от высоты самого монитора. Задачка, можно сказать, простенькая, но так как есть своя «хитрость», она окажется проблематичной, особенно, для начинающих.
И по такому случаю давайте реализуем блок на весь экран средствами CSS. Кстати, если хотите сделать по экранную прокрутку, то я делал обзор на JS-плагины экранной прокрутки (скроллинг). Вернемся к нашей задачи. Итак, вот один из примеров, как это можно сделать.
Берем DIV
или можно section
, и присваиваем ему высоту, использовав единицу измерения vh
– это относительно 1% высоты окна просмотра. Пример:
<!DOCTYPE html> <html> <head> <title>Блок на всю высоту страницы</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> *{ padding:0; margin:0; } section { height: 100vh; width: 100%; background:#E11328; } </style> <section id="hom1"> </section> </body> </html>
Вот мы и получили нужный результат. Ну а дальше уже можно подгонять под себя. К примеру, сделать два блока с обтеканием.
<!DOCTYPE html> <html> <head> <title>Блок на всю высоту страницы</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> *{ padding:0; margin:0; } .divleft { height: 100vh; width: 50%; background: #E1DD5B; float: left; } .divright { height: 100vh; width: 50%; background: #E13345; float: right; } </style> <div class="divleft"></div> <div class="divright"></div> </body> </html>
Есть также и другие варианты реализации. Это может быть flex
, JavaScript
и другое. Но этот рабочий и кроссбраузерный. Ну, если, конечно, браузер не очень старый. В Internet Explorer 8 этот способ не работает, а начиная с 9 все отлично.