Сценарий, который вы обнаружили, слишком усложнил проблему. Следующие работал для меня:
$(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);
});
Одно предупреждение о том, что событие изменения размера вызывается много при изменении размера браузера; это не просто вызвано после изменения размера браузера. В результате вы могли бы вызвать функцию обратного вызова сотни раз - это, как правило, плохая идея.
Решение должно состоять в том, чтобы дросселировать или отменить событие. Дросселирование означает, что вы не позволяете обратному вызову запускаться больше, чем x раз за промежуток времени (возможно, 5 раз в секунду). Дебонирование означает, что вы запускаете обратный вызов через определенный промежуток времени из последнего события изменения размера (подождите до 500 миллисекунд после события изменения размера).
jQuery в настоящее время не поддерживает параметр дроссельной заслонки или дебюта, хотя есть плагины. Other popular libraries you may have used do have these features, такие как подчеркивание:
$(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);
});