Question

我对我遇到的同等高度问题感到困惑，你可以在这个小提琴中看到：FIDDLE

代码：

$(document).ready(function() {
    if ($(window).width() > 768) {
    $(window).ready(function() {
        var mainHeight = $('.main').height();
        $(".block-wrap").height(mainHeight);
    });
    }else{
        $('.block-wrap').css('height','auto');
        }
});

    $(document).ready(function() {
        if ($(window).width() > 768) {
        $(window).resize(function() {
            var mainHeight = $('.main').height();
            $(".block-wrap").height(mainHeight);
        });
        }else{
            $('.block-wrap').css('height','auto');
            }
    });

基本上我想要＆＃39;块包装＆＃39;得到主要的高度＆＃39; DIV。它一直有效，直到我使用媒体查询..＆＃39; block-wrap＆＃39;仍然从主要的＆＃39; div，虽然我想在auto上设置它的高度，就像我在javascript中试过的那样。

如果刷新页面，则工作在768px以下，而不是调整大小。

Answer 1

嗯，您的JavaScript代码存在许多问题，包括输入两次（？）的事实。以下是我改变的内容：

删除了副本。
在一个$(document).on("ready", callback);事件处理程序中包装所有内容。
添加resize事件监听器，以便在用户调整屏幕大小时更新.block-wrap div高度。没有它，height只会在页面加载时更改，但如果用户更改窗口大小则不会更改。

<强>更新

在resize();事件处理程序后调用resize函数，以在加载页面后调整.block-wrap div的大小。

请注意，可以通过使用CSS而不依赖JavaScript来实现此结果。

这是最终的代码，经过优化和运作：

$(document).ready(function () {
    function resize() {
        if (window.innerWidth >= 768) {
            var mainHeight = $('.main').height();
            $(".block-wrap").css({
                "height": mainHeight
            });
        } else {
            $('.block-wrap').css({
                'height': 'auto'
            });
        }
    }
    resize();
    $(window).on("resize", function () {
        resize();
    });
});

我已将您的媒体查询max-width条件调整了一个像素：

@media only screen and (max-width: 768px) { ... }

演示：

平等高度和媒体查询

1 个答案: