Question

这是我正在处理的http://bigislandnaturetours.com/tour/

页面

问题是我正在尝试扩展右列的高度以自动调整左列的高度。我使用下面的JS，我测试过并在其他网站上工作，但不在这个网站上。什么可能是错的？

function doResize() {
    if ($(window).width() > 981) {
        setTimeout(function() {
            $(".leftpane").css("height", "auto");
            $(".midpanel").css("height", "auto");
            var heightLeft = $(".rightpane").height();
            var heightMiddle = $(".midpanel").height();
            var heightRight = $(".leftpane").height();

            if (heightRight > heightMiddle) {

                $('.midpanel').css('min-height', heightRight + 2)

            } else {

                $('.leftpane').css('min-height', heightMiddle + 2)
            }

            heightMiddle = $(".midpanel").height();
            heightRight = $(".leftpane").height();

            if (heightLeft >= heightRight) {
                $(".leftpane").css("height", heightLeft - 10);
                $(".midpanel").css("height", heightLeft - 10);
            }

        }, 1000);
    }
}


$(document).ready(function() {
    doResize();
});


$(window).resize(function() {
    doResize();
    if ($(window).width() < 561) {
        $(".leftpane").css("min-height", "auto");
        $(".midpanel").css("min-height", "auto");
    }
    $('.main-nav li').unbind("click");
    if ($('.rightpane').css('display') == 'none') {
        $('.main-nav li').bind("click", function() {
            $(this).addClass('im-curent');
            $("ul", this).toggle(100);
        });
    }

});

Answer 1

最简单的答案是使用flex-box CSS（HTML5 / CSS3），或者对于旧浏览器，使用“演示”模式中使用的表格。

两者都应自动保持列高度同步。

动态调整列的高度

1 个答案: