css 计算内容高度 |jsp页面中引入css文件

在CSS中，大家使用height属性来控制元素的固定高度，但是在很多情况下，大家需要计算元素内容的高度并且根据内容的高度来动态设置元素的高度。

//计算元素内容高度
function calcContentHeight(el) {
let computed = window.getComputedStyle(el);
let paddingTop = parseFloat(computed.getPropertyValue("padding-top"));
let paddingBottom = parseFloat(computed.getPropertyValue("padding-bottom"));
let height = el.scrollHeight - paddingTop - paddingBottom;
return height;
}
//设置元素高度为内容高度
function setElHeightToContentHeight(el) {
let height = calcContentHeight(el);
el.style.height = height + "px";
}

上面的代码演示了如何通过获取元素的padding和scrollHeight属性来计算元素内容的高度，然后再将元素的高度设置为内容高度。这样，大家就可以在不知道内容高度的情况下自动设置元素的高度。

总之，在CSS开发中，计算内容高度是一个非常有用的功能，它为大家提供了更加灵活和动态的页面布局设置。