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');
}

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

请指导我，因为此代码适用于其他页面！

最好的问候！

编辑（这是更正后的代码）：

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获胜。 :)

Cuz我也很懒，只需将它添加到你的样式表中：

/* 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;
}

Answer 2

<强> CSS

#being {
   padding:0 5px !important;
}

<小时/> 带有being的div有padding :5px，因此top和bottom分别获得5px个额外创建不同的内容而不是padding :5px只是为左右分配填充。

JQuery相同高度DIV

2 个答案: