用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

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

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

fiddle

Answer 2

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

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