Сценарий, который вы нашли, слишком усложнил проблему. У меня сработало следующее:
$(function(){
// Cache reference to our container
var $container = $("#container");
// A function for updating max-height
function updateMaxHeight () {
$container.css("max-height", $(this).height() - 100);
}
// Call updateMaxHeight when browser resize event fires
$(window).on("resize", updateMaxHeight);
});
Одним предупреждением является то, что событие resize часто вызывается при изменении размера браузера; он не просто вызывается после изменения размера браузера. В результате вы могли бы вызывать функцию обратного вызова сотни раз - как правило, это плохая идея.
Решением было бы ограничить или отменить событие. Регулирование означает, что вы не позволите обратному вызову сработать более x раз за промежуток времени (возможно, 5 раз в секунду). Подавление означает, что вы запускаете обратный вызов по истечении определенного промежутка времени от последнего события изменения размера (подождите до 500 миллисекунд после события изменения размера).
jQuery в настоящее время не поддерживает опции throttle или debounce, хотя есть плагины. Другие популярные библиотеки, которые вы, возможно, использовали, имеют эти функции , такие как подчеркивание:
$(function(){
// Cache reference to our container
var $container = $("#container");
// A function for updating max-height
function updateMaxHeight () {
$container.css("max-height", $(this).height() - 100);
}
// Version of updateMaxHeight that will run no more than once every 200ms
var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);
// Call updateMaxHeightThrottled when browser resize event fires
$(window).on("resize", updateMaxHeightThrottled);
});