使用JavaScript将最大高度设置为calc无效（无法分配给CSS属性）

更新：甚至

document.getElementById（“聊天盒”）.style.maxHeight=“calc（100%-54px）；”不起作用，因此问题在于分配给CSS属性。在Chrome developer工具的“元素”选项卡中手动更改该值将正常工作

在一个事件中，我创建了一个p并将其插入到一个div之前。然后我需要重新计算该div的最大高度，以确保不会出现不必要的滚动条。要重新计算最大高度，我在JS中创建了一个字符串：

var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"

，pin是新创建的p元素

该字符串按预期返回：
calc（100%-25px-29px）document.getElementById（“聊天盒”）.style[“max height”]
不接受它，并且保持不变

最大高度的默认原始值为
calc（100%-25px），25px为具有固定位置的其他div的固定高度

我试图在pin.getBoundingClientRect（）高度中添加25，但仍然无效

在Chrome开发者工具中将max height值更改为mhstr字符串可以完成这项工作，但我希望通过脚本更改它

下面是div对象：

<div id="chatbox" style="overflow-y: auto; max-height: calc(100% - 25px);">

注：mhstr返回
calc（100%-25px-29px）
，将[“max height”]或maxHeight更改为0、“2px”或“100%”等固定值可以正常工作，但不会更改为mhstr。
如果
25px
是固定值，为什么不这样更改公式

constmhstr=`calc（100%-${25+pin.getBoundingClientRect（）.height}px）；`；
document.getElementById（'chatbox'）.style.maxHeight=mhstr；
如果要为
最大高度
属性使用百分比数据类型，如以下示例所示：

最大高度：100%；
最大高度：计算（100%-25%）；
最大高度：计算（100%-25px）；
...

然后您应该有一个固定高度的父元素

因此，在这种情况下，在CSS或JS中设置“最大高度”并不重要


正如您在下面的示例中所看到的，第一个组有一个固定高度的父级，而第二个组有一个不固定高度的父级

因此，在设置“最大高度”后，第一个是半隐藏的，但第二个完全不变


document.getElementById（“固定高度子项”）.style.maxHeight=“10%”；
document.getElementById（“未固定高度子项”）.style.maxHeight=“10%”
#固定高度{
高度：75px；/*精确指定了父级高度*/
}
#不固定高度{
/*未指定高度值*/
}
.孩子{
溢出：隐藏；
}


固定高度的父母








高度不固定的父对象

在Firefox中，这项功能完美无瑕：


const maxHeight=“计算（20px-10px）”；
chatbox.style.maxHeight=maxHeight
#聊天室{
背景颜色：黄色；
溢出：隐藏；
}
test
我想你的意思是
document.getElementById（“chatbox”）.style.maxHeight
。父元素是否有固定的
高度？如果没有，则包含的
max height
将不起作用
100%
，在
calc内部或通过自身我尝试了style[“max height”]和style.maxHeight。没有区别。div可能会被其他元素填满，因此固定高度对它不是很好。默认的计算（100%-25px）工作正常，只是样式本身不想更改。或者它没有发生……如果父母没有固定的高度
calc（100%-25px）
就不应该工作。。所以这听起来很奇怪，它不起作用，最大高度仍然保持
calc（100%-25px）
@GreatCorn您是否检查了
console.log（pin.getBoundingClientRect（）.height）返回定义的值？并尝试
console.log（mhstr）
只是为了确保问题不在css属性的更改中。在分配给maxHeight之前，I
console.log（mhstr）
会返回假定的字符串=
calc（100%-25px-29px），pin.getBoundingClientRect（）。高度按预期返回29我的代码无法返回
计算值（100%-25px-29px）。它应该返回
calc（100%-54px）。非常抱歉，一直在这两者之间切换。您的代码确实返回
calc（100%-54px），但maxHeight never ChangesAgent确实存在，但是，高度既没有指定也没有固定：
。正如我已经说过的，在ChromeDeveloper工具的Elements选项卡中手动更改值是正常的。我想问题在于如何分配css属性。
var mhstr = "calc(100% - 25px - "+pin.getBoundingClientRect().height.toString()+"px);"
console.log(mhstr);
document.getElementById("chatbox").style["max-height"] = mhstr;