La respuesta sencilla es que no. Dinámicamente no puedes extraer las dimensiones de un <DIV>
en una variable y usarlas donde quieras, al menos no puedes con CSS esto solo lo puedes hacer mediante javascript
.
Con CSS puedes guardar en el root
la variable de altura de ese div y reusarla, pero los valores los debes setear tu mismo, manualmente. EJ:
:root{
--div-height: 100px;
}
.foo{
height: calc(100vh - var(--div-height));
}
¿Como hacerlo con JS?
Con javascript puedes guardar la variable de la altura de un div y volver a usarla en el css. Esto lo puedes hacer así:
En el HTML
<div id="div"></div>
En javascript
o en este caso Jquery
sería:
let DivHeight = "--div-height: " + $('#target').outerHeight() + "px;";
$('body').attr({ 'style': DivHeight });
Y en el CSS
, puedes usar esta variable donde quieras como lo necesitas, como en el ejemplo de arriba:
:root{
--div-height: 10px;
/*No es obligatorio que lo declares en root,
* pero igual te lo recomiendo */
}
.foo{
height: calc(100vh - var(--div-height));
}
Aquí te dejo una demo
por si es lo que realmente necesitas:
$(document).ready(function(){
let targetHeight = $('#target').outerHeight();
let DivHeight = "--div-height: " + targetHeight + "px;";
$('.foo b').append(targetHeight+" px.");
$('body').attr({ 'style': DivHeight });
});
:root{
--div-height: 10px;
}
span, b, strong{
font-weight: 100;
font-family: monospace;
}
body{
display: flex;
align-items: flex-start;
font-family: arial;
}
div{
border: solid 2px red;
padding: 5px 10px;
}
section{
--height: 200px;
height: var(--height);
padding: 10px;
}
.foo{
border: solid 2px blue;
height: calc( var(--height) - var(--div-height) );
}
.foo2{
border: solid 2px green;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div id="target" contenteditable>
Algo acá para que se entienda que hay contenido que produce un tamaño definido por el texto.
</div>
<section class="foo">
Este elemento mide, lo que mide el cuadro verde menos el cuadro rojo.
</section>
<section class="foo2">
Este elemento tiene un alto de: <b> 200px </b> definido en el CSS.
</section>
</body>
Ahora si quieres entender lo que hice, te hice este:
$(document).ready(function(){
let targetHeight = $('#target').outerHeight();
let sectionHeight = $('.foo').outerHeight();
let section2Height = $('.foo2').outerHeight();
let DivHeight = "--div-height: " + targetHeight + "px;";
$('#target span').append(targetHeight+" px.");
$('.foo2 span').append(section2Height+" px.");
$('.foo span').append(section2Height+" px.");
$('.foo b').append(targetHeight+" px.");
$('.foo strong').append(sectionHeight+" px.");
$('body').attr({ 'style': DivHeight });
});
:root{
--div-height: 10px;
}
span, b, strong{
font-weight: 100;
font-family: monospace;
}
body{
display: flex;
align-items: flex-start;
font-family: arial;
}
div{
background: lightgray;
border: solid 2px red;
padding: 5px 10px;
}
section{
--height: 200px;
border: solid 2px blue;
height: var(--height);
padding: 10px;
}
.foo{
height: calc( var(--height) - var(--div-height) );
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div id="target" contenteditable>
Algo acá para que se entienda <br>
que hay contenido que produce <br>
un tamaño dinamico. <br><br>
Este elemento en total tiene una altura de: <span></span>
</div>
<section class="foo">
Este elemento mide: <br> <span></span> - <b></b> (la altura del div de arriba) = <strong></strong>
</section>
<section class="foo2">
Este elemento también mide: <span></span>
</section>
</body>