JQuery 相同高度的潜水

JQuery Same Height DIVs

本文关键字：潜水 高度 JQuery      更新时间：2023-09-29

我是新手，所以我认为我错过了一些简单的东西。

你可以在这里看到它。

从消息框中可以看到，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 ;}

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

从 css 中删除边框/填充;或者用它来获胜。:)

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

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

CSS 

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

带有being的div 具有padding :5px，因此顶部和底部5px每个都额外创建，因此padding :5px而不是将填充分配给左侧和右侧。
相关文章：