Question

我有以下代码来调整目标元素的高度但它只适用于resize事件，而不是在加载页面时。这里的缺陷可能是没有动态设置页面加载的高度？

我也想知道如何将迭代代码转换为模块化结构这种情况。

$(window).resize(function() {
    var viewportHeight = $(window).height();
    var search = $(#something).outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
});

$(function () {
    var viewportHeight = $(window).height();
    var search = $("#something").outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
});

Answer 1

这样的事情怎么样：

var resizeGrid = function() {
    var viewportHeight = $(window).height();
    var search = $("#something").outerHeight();
    $(".k-grid-content").height(viewportHeight - (400 - search));
};
$(window).resize(function() {
    resizeGrid();
});

$(document).ready(function () {
    $(window).trigger("resize");
});

Answer 2

使用document.ready：

$( document ).ready(function() {
       var viewportHeight = $(window).height();
       var search = $("#something").outerHeight();
       $(".k-grid-content").height(viewportHeight - (400 - search));
});

基于视口高度的动态高度

2 个答案: