С помощью css растянуть слой у меня не получилось. На помощь пришел javascript и JQuery.
при изменении размеров будем менять размер слоя принудительно:
|
|
$(document).ready(function($){ //запускаем, когда документ загрузится $(window).resize(function(){ //Вешаем на событие ресайза у окна функцию $("#div_id").height($(window).height()); //меняем высоту дива на высоту окна }); $("#div_id").height($(window).height()); //меняем высоту дива на высоту окна в первый раз, т.к. событие просто при открытии не вызывается }); |
Вот так все просто.
Вообще для window и document доступна только эта функция.
Зато для остальных элементов есть еще несколько: подробнее
здесь.
width и
height бывают разные. А потому и несколько функций на JQuery.
.height()
.height() - возвращает высоту элемента (его информационную часть)
.height(value) - устанавливает высоту элемента
.innerHeight()
.innerHeight() - возвращает высоту элемента с учетом padding
(далее…)
Много решений в инете, о конструировании на слоях шаблонов страниц, но под мою задачу не было.
Вот решил поделиться.
ТЗ:
- Три колонки (ничего нового, в принципе - не важно сколько их)
- Все растягивается по ширине, пропорционально: левая - 20%; правая - 20%; центральная - 60% (ничего нового)
- Слои не должны переноситься при ресайзе окна (тоже логично, но немного конфликтует со следующим пунктом)
- При ресайзе слои должны ужиматься до минимально размера в 300px - левая и правая колонки, 400px - центральная
А проблема в том, что 300px получается больше 20% при общей ширине в 1000px, и слои переносятся если места не хватает.
Итак, решение:
- Ограничиваем слои в сжатии
- Задаем параметры ширины в соответствии с ТЗ
- Боковые слои выравниваем налево и направо. И обтекаем их центральным
Вот как-то так. Смотрим на практике:
(далее…)
Свежие комментарии