用JavaScript調整div大小似乎是錯誤的

Question

我有一個（藍色）div，我想（垂直）放大以覆蓋相同大小的多個div（其中12個）。

我采取的步驟是獲取div高度（帶浮點數），將值乘以12，然后將新大小應用於div。

結果div不適合第12 div，因此無法理解原因。 我認為邊框/邊距有關系，但是變量appHeadHeight已經包含了這些尺寸（我已經使用Chrome的Inspect工具進行了檢查）。

請查看JSFiddle以獲取整個代碼。 歡迎任何建議。

var theAppointCode = "10071000116";
var theAppointLength = 12;

//get the blue cell height
var appHeadHeight = $("#"+theAppointCode)[0].getBoundingClientRect();
appHeadHeight = appHeadHeight.height;

//debug
alert("["+appHeadHeight+"] x ["+theAppointLength+"] = ["+(parseFloat(appHeadHeight)*parseFloat(theAppointLength))+"]");

//multiply the cell height by 12
document.getElementById(theAppointCode).style.height = (parseFloat(appHeadHeight)*parseFloat(theAppointLength))+"px";

JSFiddle： https ：//jsfiddle.net/niandrei/vpgc73p2/1/

Answer 1

如果減去邊界（ theAppointLength / 2 ），則最終得到正確的高度。 所以：

// new height
var nh = parseFloat(appHeadHeight) * parseFloat(theAppointLength);
nh -= theAppointLength / 2;
document.getElementById(theAppointCode).style.height = nh + 'px';

Answer 2

另一種方法是使用行的位置來計算正確的高度。 這與邊框的厚度無關。

var appointment = $("#" + theAppointCode),
    row = appointment.closest(".dayrow"),
    endRow = row.nextAll(".dayrow").eq(theAppointLength - 1);  // the row after/below the appointment

appointment.height((endRow.position().top - row.position().top));

小提琴