基于视口高度的动态高度

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));
});