Das Skript, das Sie gefunden haben, hat das Problem übermäßig kompliziert gemacht. Die folgenden für mich gearbeitet:
$(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);
});
Eine Warnung ist, dass das Resize-Ereignis viel aufgerufen wird, wenn der Browser Ändern der Größe; Es wird nicht nur aufgerufen, nachdem die Größe des Browsers geändert wurde. Daher könnte die Callback-Funktion hunderte Male aufgerufen werden - das ist im Allgemeinen eine schlechte Idee.
Die Lösung wäre, das Ereignis zu drosseln oder zu entprellen. Drosselung bedeutet, dass Sie den Rückruf nicht mehr als x Mal in einer Zeitspanne auslösen lassen (vielleicht 5 Mal pro Sekunde). Entprellen bedeutet, dass Sie den Callback nach Ablauf einer bestimmten Zeitspanne ab dem letzten Resize-Ereignis auslösen (warten Sie 500 Millisekunden nach einem Resize-Ereignis).
jQuery unterstützt derzeit keine Drossel- oder Entprellungsoption, obwohl es Plugins gibt. Other popular libraries you may have used do have these features, wie Strich:
$(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);
});