javascript - 具有CSS高度的jQuery调整大小功能

Question

我正在尝试将高度设置为其父项所具有的 div。我已经尝试过，当我使用 console.log() 时，它确实有效。但是高度不会在没有刷新的情况下设置.....

这是我的功能

// Set Hight
function fixingHeight() {
    function setHeight() {
        var windowWidth = window.innerWidth;

        var latestPostsWrapperHeight = $('#latestPosts').height();
        var tabPane = $('#latestPosts').find('.tab-pane');
        var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');

        var popularPostsWrapperHeight = $('#popularPosts').height();
        var profileWrapper = $('#popularPosts').find('.pofile-wrapper');

        if(windowWidth > 767) {
            $.each(tabPane, function() {
                $(this).height(latestPostsWrapperHeight - 70);
            });

            $.each(tabPaneLists, function() {
                $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
            });

            $.each(profileWrapper, function() {
                $(this).outerHeight(popularPostsWrapperHeight);
            });
        }

        //console.log(windowWidth);
    }setHeight();

    $(window).resize(function() {
      setHeight();
    });
}fixingHeight();

Answer 1

• 要处理窗口调整大小事件，请在函数 setHeight() 之外调用函数 $(window).resize
• 要在第一次加载时调用 setHeight()，请使用 jquery 处理程序 $(document).ready

这是最终代码:

function setHeight() {
    var windowWidth = window.innerWidth;

    var latestPostsWrapperHeight = $('#latestPosts').height();
    var tabPane = $('#latestPosts').find('.tab-pane');
    var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');

    var popularPostsWrapperHeight = $('#popularPosts').height();
    var profileWrapper = $('#popularPosts').find('.pofile-wrapper');

    if(windowWidth > 767) {
        $.each(tabPane, function() {
            $(this).height(latestPostsWrapperHeight - 70);
        });

        $.each(tabPaneLists, function() {
            $(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
        });

        $.each(profileWrapper, function() {
            $(this).outerHeight(popularPostsWrapperHeight);
        });
    }
    console.log(windowWidth);
}
$(document).ready(function() {
  setHeight();
});
$(window).resize(function() {
  setHeight();
});