Le script que vous avez trouvé a compliqué le problème. Ce qui suit a fonctionné pour moi:
$(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);
});
Un avertissement est que l'événement resize est appelé beaucoup lors du redimensionnement du navigateur; ce n'est pas seulement appelé après le redimensionnement du navigateur. En conséquence, vous pourriez avoir la fonction de rappel appelée des centaines de fois - c'est généralement une mauvaise idée.
La solution consisterait à étrangler ou à annuler l'événement. La limitation signifie que vous ne laissez pas le rappel être tiré plus de x fois dans un laps de temps (peut-être 5 fois par seconde). Le rebond signifie que vous lancez le rappel après un certain laps de temps après le dernier événement de redimensionnement (attendez 500 millisecondes après un événement de redimensionnement). JQuery ne supporte pas actuellement une option d'étranglement ou de débrayage, bien qu'il y ait des plugins. Other popular libraries you may have used do have these features, comme underscore:
$(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);
});