Я использую этот script из snipplr, как бы установить его, чтобы контейнер div был на 100px меньше высоты newWindowHeight, например, -100 или что-то.
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("max-height", newWindowHeight );
}
});
</script>
script Вы обнаружили сложную проблему. Для меня работали следующие:
$(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 в настоящее время не поддерживает параметр дроссельной заслонки или 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);
});
Я только что видел событие HTML под названием "onResize", которое относится к особенному тегу Он будет иметь больше производительности, чем java-обнаружение с этим использованием, я думаю.
<body onresize="functionhere()">
Надеюсь, это поможет вам, ребята.