0

La idea es extraer los datos de un div y usarlos para calcular dentro de otro div.

height: calc(100vh - 100px)

Algo que funcione como esto:

height: calc(100vh - #div)

Usando el #div como referencia y a partir de esos datos calcular.

¿Se puede hacer con solo CSS?

2 respuestas 2

4

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>

1

No, que yo sepa no puedes usar CSS para obtener (get) la altura de un elemento, solamente para definirla (set). En cambio podrías hacerlo de manera sencilla con Jquery o Javascript puro.

JQUERY

var altura = $('#miDiv').height();

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.