HTML, JavaScript Робимо блоки однакової висоти, Блог доброго програміста
Сьогодні йтиметься про вирішення такої проблеми як створення колонок однакової висоти. Для тих хто не в курсі цієї проблеми її опис всередині ... Припустимо у нас є простий html файл приблизно наступного змісту:
Примітка:Клас у колонок вказаний не просто так, для чого це потрібно буде зрозуміло далі!
На перший погляд, все буде виглядати добре. Але варто додати в якийсь блок більше тексту, як ми побачимо картину, коли наші блоки перетворюються на барвисту діаграму. Власне, в цьому і є проблема. На даний момент немає однозначного рішення, що дозволяє розтягнути всі три блоки за висотою максимального. Вирішення цієї проблеми може бути в лоб з використанням замість елемента div старий добрий table. Ще одне рішення може полягати у використанні css та властивості display. Однак ми розглянемо варіант рішення за допомогою скриптів на прикладі jquery і без нього.
Перше що нам необхідно це призначити нашим колонкам якийсь унікальний клас (це в прикладі вже зроблено) для того, щоб можна було отримати список усіх колонок, з якими потрібно працювати. Ну а далі в роботу вступає скрипт:
Тут варто відзначити момент, що скрипт викликається не лише після завантаження сторінки, але ще й із невеликою затримкою. Пов'язано це з тим, що браузер не завжди може встигнути відобразити завантажені картинки, і як висота деяких блоків буде вважатися неправильно. Затримка гарантує, що картинки встигнуть здатися повністю. Якщо ви не використовуєте Jquery, цей код можна записати на чистомуJavascript:
Якщо Ви звикли використовувати Jquery плагіни, то для Вас код далі.