Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2016, 09:43
Новичок на форуме
Отправить личное сообщение для yamashka Посмотреть профиль Найти все сообщения от yamashka
 
Регистрация: 15.01.2016
Сообщений: 2

Резиновая высота сайта
Привет, форумчане!
Есть задачка сделать блок резиновым, в зависимости от высоты экрана.
Есть код, работает, но как то не плавно и не ровно.

$(window).on("load scroll resize",function(e){
if ($(window).height() <= '489'){
$('#blue').css({'min-height':'100px'});
}
else if ($(window).height() <= '609'){
$('#blue').css({'min-height':'235px'});
}
else if ($(window).height() <= '657'){
$('#blue').css({'min-height':'285px'});
}
else if ($(window).height() <= '689'){
$('#blue').css({'min-height':'315px'});
}
else if ($(window).height() <= '753'){
$('#blue').css({'min-height':'365px'});
}
else if ($(window).height() <= '789'){
$('#blue').css({'min-height':'415px'});
}
else if ($(window).height() <= '849'){
$('#blue').css({'min-height':'475px'});
}
else if ($(window).height() <= '877'){
$('#blue').css({'min-height':'490px'});
}
else if ($(window).height() <= '887'){
$('#blue').css({'min-height':'500px'});
}
else if ($(window).height() <= '913'){
$('#blue').css({'min-height':'530px'});
}
else if ($(window).height() <= '939'){
$('#blue').css({'min-height':'550px'});
}
else if ($(window).height() <= '969'){
$('#blue').css({'min-height':'570px'});
}
else if ($(window).height() <= '987'){
$('#blue').css({'min-height':'590px'});
}
else if ($(window).height() <= '1040'){
$('#blue').css({'min-height':'640px'});
}
else if ($(window).height() <= '1089'){
$('#blue').css({'min-height':'680px'});
}
})



Существуют ли какие нибудь другие варианты ?
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2016, 10:45
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

yamashka,
Вариант:

$(window).on("load scroll resize",function(e){
   var a = ($(window).height() - 389;
   $('#blue').css({'min-height':a+'px'});
})

Последний раз редактировалось Dilettante_Pro, 15.01.2016 в 10:53.
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2016, 11:05
Новичок на форуме
Отправить личное сообщение для yamashka Посмотреть профиль Найти все сообщения от yamashka
 
Регистрация: 15.01.2016
Сообщений: 2

Dilettante_Pro,
Спасибо большое!
Только правильно вот так

$(window).on("load scroll resize",function(e){
   var a = $(window).height() - 389;
   $('#blue').css({'min-height':a+'px'});
})


Скобка лишняя во 2 строке

Последний раз редактировалось yamashka, 15.01.2016 в 11:26.
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2016, 18:47
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

yamashka, используйте CSS-медия запросы и единицы измерения vh/vw:

vh = 1% высоты экрана
vw = 1% ширины экрана



#blue {
   min-height: 50vh;
}

Последний раз редактировалось ruslan_mart, 15.01.2016 в 18:51.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Браузер внутри сайта (аналоги iframe) holop Общие вопросы Javascript 3 10.03.2017 23:56
При вводе названия сайта, в поисковой системе, отображался каталог из разделов сайта? MSDeveloper (X)HTML/CSS 1 04.10.2014 12:32
background resize IceDvl jQuery 4 25.04.2014 17:54
передача данных из форм своего сайта в формы стороннего сайта najrobi Общие вопросы Javascript 19 15.07.2012 22:18
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55