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

5

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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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