Как растянуть одновременно несколько слоёв, дивов, div по высоте используя CSS.
Я очень часто сталкивался с проблемой, когда нужно было растянуть две или три колонки разных слоёв, кто не понял слой – это тот же див, div, layer, samp. Ну не будем отвлекаться, слои, дивы, div и т.д. нужно растягивать по высоте одновременно, и без использования JavaScript, так как это уже извращение. В нашем управлении только html и CSS. Полгода назад, эта задача для меня была не решаемой, приходилось постоянно мухлевать. В Интернете было много решений, но они все были или кривоваты, или не работали в на всех известных мне браузерах. Как-то раз, я случайно, забрел на иностранный сайт и увидел там страницу сверстанную дивами, которые растягивались. Я взял продебажил эту страницу и на основе их реализации придумал свою. Об этом и пойдет дальше речь.
Резиновый шаблон для трех дивов, используя блочную или дивную div верстку.
Для создания колонок, слоёв, дивов одинаковой длины нужно три дополнительных элемента html разметки, проще говоря три <div>.
Пример трех одинаковых дивой вы можете скачать с ftp здесь. Разархивируйте архив, и запустите файл index.html. Неправда ли, сильно напоминает дизайн моего блога. Да, так и есть, это моя заготовка.
Теперь немного о коде:
<div id="conteiner"> – нужен для ограничения страницы;
<div class="info_3"> – эти три слоя разбивают страницу на части, постоянно сдвигая её в лево;
<div class="info_2">
<div class="info_1">
<div class="l_inf"> – слои для помещения информации.
<div class="m_inf">
<div class="r_inf">
Как вы поняли, здесь главную роль играет обман зрения, который появляется в результате наложения слоёв, а рисунки с папки img позволяют это накладывание скрыть. Если разобраться, то этот пример становиться простым и понятным. Надеюсь, у вас проблем не будет. Выше приведённый пример позволяет создавать 3 дивы одинаковой высоты, которые одновременно растягиваются. Модернизировав код, можно создать такой же резиновый шаблон и для 2, 4, и больше дивов одинаковой, зависимой друг от друга высоты, или длины.
Комментарии отключены