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

fiddle

使用JavaScript调整div的大小看起来有误

2 个答案: