javascript - JQuery 相同高度 DIV

Question

我对此很陌生，所以我认为我错过了一些简单的东西。

可以看到here .

正如您从消息框中看到的那样，JavaScript 工作正常，但两个 DIV 的大小并未调整为相同的高度。

我使用的 JavaScript 是这样的:

function doResize() {
    alert('before: being ' + $('#being').height());
    alert('before: questions ' + $('#questions').height());
    maxHeight = 0;
    var divs = jQuery("#questions, #being");
    $.each(divs, function () {
        var height = jQuery(this).height();
        if (maxHeight < height) maxHeight = height;
    });
    divs.height(maxHeight);
    alert('after: being ' + $('#being').height());
    alert('after: questions ' + $('#questions').height());
    $("#main").css('visibility', 'visible');
}

我在文档加载事件上调用此函数。

请指导我，因为此代码可以在其他页面上运行!

最诚挚的问候!

编辑(这是更正后的代码):

function doResize()
{

    //alert('before: being ' + $('#beingContent').height());

    //alert('before: questions ' + $('#questionsContent').height());

    maxHeight = 0;

    var divs = jQuery("#questionsContent, #beingContent");

    $.each(divs, function(){
        var height = jQuery(this).height();
            if(maxHeight<height)
                maxHeight = height;
    });

    divs.height(maxHeight);

    $('#beingContent').css('height', maxHeight - 2);

    //alert('after: being ' + $('#beingContent').height());

    //alert('after: questions ' + $('#questionsContent').height());


    $("#root").css('visibility', 'visible');

}

和CSS:

#beingContent { padding:0 5px !important; border:1px solid black !important ;}

这解决了对齐问题!谢谢。

Answer 1

从CSS中删除边框/填充；或使用this为了胜利。 :)

因为我也很懒，只需将其添加到您的样式表中即可:

/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}