Question

我有2个较小的div和一个大div。我需要将较大div的height调整为等于两个div的高度之和，加上它们之间的20px垂直边距。这就是我的所作所为：

<div id="team-container">
    <div id="block1">Block 1</div>
    <div id="block2">Block 2</div>  
</div>
<div id="team-details"></div>

$("#team-container > div").on("click", function(){
    var contentHeight = $("#block1").height() + $("#block2").height() + 20;
    // 20 is for vertical margin
    // if I console log the heights of block divs, it's 263px for certain width, so the total becomes 546, which is correctly logged if I console log contentHeight variable.
    console.log( contentHeight ); // outputs 546
    $("#team-details").height( contentHeight );
    //if I check now by inspecting element, I can see the height has been set to 606px. Why is it so? And on the page also, the larger div is taller than the two smaller divs put together vertically.
});

所以，问题是如果我调用.height( 546 );，它不会将高度设置为546px，而是将其设置为606px。但如果我使用css设置高度，即.css('height', '546px');，它工作正常，高度设置为546px。

Answer 1

jQuery的height函数实际上非常聪明，并且在幕后进行了大量的计算，包括边框，填充边距等。

考虑使用$("#team-details").css('height', contentHeight + 'px');。这是一种更直接的方法，如果您正在进行自己的计算，在这种情况下它可能更适合您。

顺便说一句，实际上不需要+ 'px'。来自jQuery文档：

调用.height（value）时，该值可以是字符串（数字和单位）或数字。如果只为该值提供了数字， jQuery采用像素单位

来自css功能文档（http://api.jquery.com/css/#css-propertyName-value）：

当一个数字作为值传递时，jQuery将将其转换为a string并将px 添加到该字符串的末尾。如果财产需要除px以外的单位，将值转换为字符串并添加在调用方法之前适当的单位。

还有一件事，如果您想进一步了解height功能的工作原理，可以在此处查看：第{333}行至第353行https://github.com/jquery/jquery/blob/master/src/css.js。尽可能看，它调用了augmentWidthOrHeight函数，它做了一些严肃的计算和jQuery魔术。

jQuery.height（）设置的高度超过参数中指定的高度

1 个答案: