Динамическая высота() с изменением размера окна() с переменным полем

Итак, если у вас есть эта функция для динамической установки высоты div в зависимости от высоты браузера:

$(window).resize(function() {
    $('#slideshow').height($(window).height() - 110);
});

$(window).trigger('resize');

Это работает как шарм. Как видите, поле составляет 110 пикселей (это соответствует высоте моего заголовка).

Этот код не является оптимальным, поскольку высота заголовка может варьироваться в зависимости от текущего окна просмотра.

Есть ли способ настроить это динамически? Или, по крайней мере, установите некоторые условия, такие как:

Если ширина браузера больше 768 пикселей, установите поле 110 пикселей. Если меньше 767, то поле должно быть 80px.

Пока это мой отредактированный код, но я не уверен, что я на правильном пути:

$(window).resize(function() {

    var set_width = $(window).width();
    if(set_width <= 767) 

    $('#slideshow').height($(window).height() - 110);
});

$(window).trigger('resize');

Большое спасибо!

РЕДАКТИРОВАТЬ:

Теперь, когда я думаю об этом лучше, эти 110 пикселей не являются полем, это вычитание, которое я делаю, чтобы мой заголовок и слайд-шоу заполнили все окно. Если я не сделаю это вычитание, то я получу высоту моего заголовка + высоту слайд-шоу (которая занимает высоту браузера), заставляя его прокручиваться.

Поэтому я не думаю, что смогу сделать это с помощью CSS. Вот почему я думал о решении Javascript.


javascript jquery window-resize
person Johann    schedule 21.05.2015    source источник
comment
Хотя реализовать это на JavaScript — это хорошо, вы не думали реализовать отзывчивость в CSS с помощью медиа-запросов?   -  person Halcyon    schedule 21.05.2015
comment
@Halcyon Как я могу реализовать это в CSS, если высота динамическая?   -  person Johann    schedule 21.05.2015
comment
@Johann, медиа-запросы не помогут вам установить динамическую высоту, выполнить вычисления и т. д.   -  person lshettyl    schedule 21.05.2015
comment
@LShetty Я так и думал. Не могли бы вы вести меня в правильном направлении, пожалуйста?   -  person Johann    schedule 21.05.2015
comment
Это работает для вас - http://jsfiddle.net/L1j4kkav/1/?   -  person lshettyl    schedule 21.05.2015
comment
@LShetty Вау! Работает как шарм. Опубликуйте это как ответ, чтобы я мог отметить его :) Большое спасибо!   -  person Johann    schedule 21.05.2015
comment
jsfiddle.net/53hoq9w7   -  person Pierre    schedule 10.07.2015

Ответы (2)


arrow_upward
2
arrow_downward

Итак, вам понадобится что-то вроде следующего. Я надеюсь, что код прост.

$(window).on("resize", function() {

    var winHeight = $(window).height();
    var headerHeight = $("header").height();
    $('#slideshow').height(winHeight - headerHeight);
});

$(window).trigger('resize');

Пример HTML, который я использовал в качестве модели:

<body>
    <header>my header</header>
    <div id="slideshow"></div>
</body>
person lshettyl    schedule 21.05.2015

arrow_upward
1
arrow_downward

Вы можете сделать что-то вроде этого:

$(window).resize(function() {
    var buffer = ($(window).width()<768)?80:110;
    $('#slideshow').height($(window).height() - buffer );
});

$(window).trigger('resize');

Как предложил Halcyon в комментариях, используйте css. Это самый аккуратный способ сделать это.

person ravish.hacker    schedule 21.05.2015
comment
Я думаю, что ваше решение находится на правильном пути, пожалуйста, проверьте обновленный вопрос. Является ли: var buffer = ($(window).height()‹768)?80:110; часть правильная? Я думал, что это будет: var buffer = ($(window).width()‹768)?80:110; вместо - person Johann; 21.05.2015