Сучасні браузери дозволяють за допомогою CSS3 розтягнути блок по всій висоті видимій області. Однак з браузерами попередниками, не підтримують стандарт CSS3 все набагато інакше. Є випадки, при яких можна обійтися без CSS3 в старих браузерах і розтягнути блок по висоті, не вдаючись до JavaScript. Якщо блок розташований безпосередньо після тега body, то достатньо задати висоту для тега html, body, а так ж самого div, величиною 100%.
В сучасних браузерах є підтримка CSS3, а це значить, що є можливість використання позначення одиниці вимірювання vh, яка вкаже браузеру, що потрібно задати значення у відсотках від розміру вікна браузера. І в цьому випадку наступна запис могла цілком може бути доречною для того щоб розтягнути блок div по висоті:
div { height: 100vh; /* 100% від висоти розміру вікна браузера */ }
Другий варіант більш практичний, так як підтримується більшістю браузерів, незалежно від того, чи є у браузера підтримка CSS3 чи ні. Тут буде задіяний javascript поряд з jquery. Використовуючи $(window).height ми можемо отримати висоту вікна браузера, після чого нам достатньо задати цю висоту для блоку, щоб розтягнути div по висоті вікна браузера.
// функція дізнається розмір вікна браузера, і задає її для блоку div
function fullHeight(){
$(‘.myDiv’).css({
height: $(window).height() + ‘px’
});
}
// задаємо висоту при первинному завантаженні
fullHeight();
// висота при зміні розміру вікна браузера
$(window).resize( fullHeight );
Другий спосіб дозволяє розтягнути блок div по висоті практично у всіх браузерах, де є підтримка JavaScript. CSS3 незабаром буде використовуватися повсюдно. Однак є відсоток користувачів, які використовують браузери без підтримки цього стандарту. Використовувати якийсь із прикладів чи ні — рішення за вами, на цьому поки все, спасибі за увагу.
Додав: htmaker, 23.07.2016 р.
(2 голосів, середній: 2,00 5)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
