Question

我尝试使用javascript在响应式布局上设置高度。我注意到当使用以下功能时，在使窗口变窄时应用高度但在移回原始较宽窗口位置时不会重置。无论窗口大小如何，都保留高度。如何将div重置为原始高度？

$(function () {

    $(window).on("load resize", function () {
        console.log($(this).width());
        if ($(this).width() < 1025) {
            $(".case-study-child").height($(".case-study-parent").height());
        } 
    }).trigger('resize');

});

Answer 1

执行此操作的最佳方法是正确安排标记并使用响应式样式。然而，可能有一个原因是响应式风格不足，需要用js来解决：

您需要定义全屏＆＃39; .case-study-child div的高度，因此当屏幕宽度超过1024时可以设置它。如果页面最初加载在＆lt; 1024

$(function () {

    // need to know what the div height should be when the page width is >= 1025px
    window.fullScreenHeight = "250px";

    $(window).on("load resize", function () {

        console.log($(this).width());

        // get the height to set the div to based on the screen width
        var newDivHeight = $(this).width() < 1025 ? $(".case-study-parent").height() : window.fullScreenHeight;

        $(".case-study-child").height(newDivHeight);

    }).trigger("resize");

});

调整窗口大小时重置div高度

1 个答案: