我想将动态属性保存在变量中,然后我想将该变量与calc()
一起使用
我有一个动态高度的班级
.cuerpo-detalle {
height: x;
}
我想分配一个具有类 height 属性的变量.cuerpodetalle
:root{
cuerpoDetalle: .cuerpo-detalle.height;
}
然后我想将该变量用作动态度量值,并将其乘以 2 以获得页脚 xpand
.footerxpand{
height: calc(var(--cuerpoDetalle)*2);
}
你可以用js做这样的事情...
这个关于用javascript计算身高的问题也可能是困难的。
var elem = document.getElementById('cuerpo-detalle'),
height = elem.offsetHeight;
document.documentElement.style.setProperty('--cuerpoDetalle', height + 'px');
:root {
--cuerpoDetalle: auto;
}
footer {
height: calc(var(--cuerpoDetalle) * 2);
background: black;
}
div {
width: 66ch;
margin: 0 auto;
}
<div id="cuerpo-detalle">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, facere officiis amet cumque voluptas repudiandae, iure accusamus consequatur dolor eligendi autem architecto ea libero eum perspiciatis voluptate molestias laboriosam. Ad.</p>
</div>
<footer></footer>