如何通过 JavaScript 变量在 CSS 中设置高度？答案

【问题标题】：How to set height in CSS from JavaScript Variable?如何通过 JavaScript 变量在 CSS 中设置高度？
【发布时间】：2021-11-24 02:48:41
【问题描述】：

所以，我正在使用 Slick 滑块，并且只想在滑块处于活动状态时应用一些代码。

.specialist-description-wrapper {
height: 0rem;
}
.slick-current.slick-active .specialist-description-wrapper {
height: 20rem;

}

但问题是，我不想有固定的高度。我想要一个“自动”高度，所以如果我的内容变大，它就会自动适应。如果我尝试将高度从 0rem 变为 Auto，则“过渡”不起作用。

所以，我决定使用 JavaScript 来计算元素的高度。

    let descriptionWrapper = document.querySelector(".slick-current.slick-active .specialist-description-wrapper")
    let height = descriptionWrapper.offsetHeight
    descriptionWrapper.style.height = height;

但这对我不起作用。我错过了什么吗？

【问题讨论】：

身高需要单位。但是当你这样做的时候，过渡就会发生。请显示有效的 sn-p 代码。

标签： javascript html css height

【解决方案1】：

将高度保持为自动只会占用自身使用的高度，不会占用全高。要使高度根据父母的身高进行响应式调整，您可以使用

height: 100%;

这将使元素占据其父元素的所有高度。

但是，如果有任何问题，您可以调整元素的内容。因为 100% 的高度很重要。

另外，您没有提供足够的有关您的标记的代码。请始终提供代码，以便每个人都能为您写出更好的答案。

【讨论】：