Calcular la altura div dada un ancho conocido?

8

Tengo un div que contiene una imagen y algo de texto (la imagen es de tamaño variable y el texto es de longitud variable).
¿Hay alguna forma de calcular la altura requerida para ajustar todo el contenido div, dado que el ancho exacto está predefinido?

UPD obtiene el mismo resultado incorrecto al usar $(document).ready()

document.addEventListener("DOMContentLoaded", function ()
{
		var div = document.getElementById("Content");
		var res = document.getElementById("Result");

		res.innerHTML = div.offsetHeight; // incorrect - returns 252 while the real height is 360 (Firefox, Chrome)
});

div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}

<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Expandir fragmento

javascript css

— usuario626528
fuente

2

@Rob ¿No es una pregunta legítima lo que lo hace fuera de tema?

— Tom M

¿Quieres una forma de JavaScript o CSS puro?

— Bobtroopo

@Bobtroopo JS estaría bien.

— usuario626528

2

AFAIK no puede obtener la altura correcta antes de cargar la imagen, ya que no conoce el tamaño de la imagen. Entonces, creo que solo podría obtener el valor correcto después de la carga de la imagen, y onloadluego obtener la altura dentro de la devolución de llamada

— Calvin Nunes

¿Jquery está bien?

— Fahim Khan

2

Tienes que usar window.onloaden su lugar.

El evento de carga se activa cuando se ha cargado toda la página, incluidos todos los recursos dependientes, como hojas de estilo e imágenes . Esto contrasta con DOMContentLoaded, que se activa en cuanto se carga la página DOM , sin esperar a que los recursos terminen de cargarse. ^árbitro

En su caso, debe esperar la imagen y no solo el DOM.

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};

div {
  width: 400px;
}

img {
  float: left;
  margin: 0.5em;
}

<div id="Content">

  <img src="https://picsum.photos/id/82/200/150" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce.
  Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus
  vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et
  malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Expandir fragmento

— Temani Afif
fuente

5

Para determinar con precisión la altura del div y la imagen. Esto se debe a que es probable que la imagen termine de cargarse en último lugar; si la altura del contenedor se verifica antes de cargar la imagen, devolverá la altura sin tener en cuenta la altura de la imagen.

Se debe agregar un oyente a la imagen para que verifique la altura una vez que se carga la imagen.

img.addEventListener('load', onLoad);

Debido a que el estilo es simple offsetHeighty clientHeightdebería funcionar, pero para incluir todo el elemento (con borde y margen) use scrollHeightcomo se describe en Element.scrollHeight en los documentos web de MDN

El código resultante:

<div id="Content">
    <img id="Image" src="https://picsum.photos/id/82/200/150" />
    ...
</div>
<br/>
<span id="Result"></span>
<script>
    var img = document.getElementById("Image");

    function onLoad() {
        var div = document.getElementById("Content");
        var res = document.getElementById("Result");

        res.innerHTML = div.scrollHeight;
    }

    img.addEventListener('load', onLoad);
</script>

Todo el ejemplo está en un CodeSnadbox aquí:

— Seth Corker
fuente

2

No estoy seguro de entender completamente su pregunta, pero puede usar JavaScript para calcular la altura de un div.

var height = document.getElementsByTagName('div').offsetHeight;

— Armedin Kuka
fuente

No parece que esta medida sea correcta, ya que estoy obteniendo 252 y el div real se parece más a 350 píxeles de altura. Además, obtengo diferentes medidas inmediatamente después de abrir el documento y después de actualizarlo (Firefox).

— user626528

Hay otra manera: document.getElementsByTagName('div').getBoundingClientRect().height. Prueba esto y avísame si funciona.

— Armedin Kuka

1

El mismo problema con este. ¿Tal vez se trata de diferentes etapas de renderizado?

— user626528

1

Sé que está pidiendo cambiar el tamaño del div una vez que se carga la imagen para hacer que el div sea más alto, pero solo como comentario lateral, ¿sabe / ha intentado el tamaño de fondo: contiene?

Según lo especificado por MDN:

El valor de contención especifica que, independientemente del tamaño del cuadro que contiene, la imagen de fondo se debe escalar para que cada lado sea lo más grande posible sin exceder la longitud del lado correspondiente del contenedor.

El valor de la cubierta:

El valor de la cubierta especifica que la imagen de fondo debe tener un tamaño que sea lo más pequeño posible, al tiempo que garantiza que ambas dimensiones sean mayores o iguales que el tamaño correspondiente del contenedor. Intente cambiar el tamaño del ejemplo a continuación para ver esto en acción.

Cuando se combina con la posición de fondo, creo que puede ser realmente útil

— Jenaro Calviño
fuente

1

si quieres usar jquery, esta es la forma

$(document).ready(function(){
  $("#Result").html($("#Content").height());
})

div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Expandir fragmento

— Fahim Khan
fuente

¿En serio? jquery ahora se considera la reencarnación del diablo, los deja enloquecer con js puro.

— Fabio Caccamo

0

No de forma dinámica, ya que tiene el ancho establecido, no sería difícil calcularlo porque no cambiará en diferentes pantallas. Pero la única forma es hacerlo MANUALMENTE UTILIZANDO HERRAMIENTAS DEV.

Si la imagen y la fuente cambian, puede tener un script javascript que después de onlaod verá qué altura tiene el div. (si necesita este comentario a continuación)

— Renaldo Balaj
fuente

0

En js puedes obtener la altura de cualquier elemento. el ancho no es necesario para calcular la altura.

dado que div es una etiqueta genérica, agregue alguna identificación para hacerla específica para asegurarse de que la etiqueta correcta esté dirigida para calcular la altura

var element_height = document.getElementById("ElToCalHeight").offsetHeight;
alert('Element height ' + element_height);

<div id="ElToCalHeight">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labo...

</div>

Expandir fragmento

— Ganeshkumar K
fuente

0

Puede usar la propiedad .scrollHeight .

document.addEventListener("DOMContentLoaded", function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.scrollHeight; 
});

div {
  width: 400px;
}

img {
  float: left;
  margin: 0.5em;
}

<div id="Content">

  <img src="https://picsum.photos/id/82/200/150" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce.
  Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus
  vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et
  malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Expandir fragmento

— Kalimah
fuente

0

El evento DOMContentLoaded se activa cuando el navegador carga completamente el HTML y se crea el árbol DOM, pero los recursos externos como imágenes y hojas de estilo aún no se han cargado. Mientras elevento window.onload se activa cuando se carga toda la página, incluidos los estilos, las imágenes y otros recursos.

Y obtuvo la altura como 252 en lugar de 360 porque la altura del div sin su imagen es 252. Como referencia, puede ejecutar el fragmento a continuación.

Este fragmento de código corresponde a div sin imagen y usando window.onload (Entonces la altura es 252)

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};

div
	{
		width: 400px;
	}

/**	img
	{
		float: left;
		margin: 0.5em;
}**/

<div id="Content">
  <!-- Image tag is not present -->
	<!--<img src="https://picsum.photos/id/82/200/150" />-->

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Expandir fragmento

El siguiente fragmento de código corresponde a div con image y usando window.onload y ahora la altura llegará a 360 como se esperaba.

window.onload = function() {
  var div = document.getElementById("Content");
  var res = document.getElementById("Result");

  res.innerHTML = div.offsetHeight; 
};

div
	{
		width: 400px;
	}

	img
	{
		float: left;
		margin: 0.5em;
}

<div id="Content">

	<img src="https://picsum.photos/id/82/200/150" />

	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci phasellus egestas tellus rutrum. Tempor nec feugiat nisl pretium fusce. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Purus sit amet luctus venenatis lectus magna fringilla urna. Ut tristique et egestas quis. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Semper quis lectus nulla at. Augue interdum velit euismod in. Amet aliquam id diam maecenas ultricies mi eget. Scelerisque viverra mauris in aliquam sem fringilla ut morbi. Et egestas quis ipsum suspendisse. Et malesuada fames ac turpis. Fermentum iaculis eu non diam phasellus vestibulum lorem sed.

</div>
<br/>
<span id="Result"></span>

Expandir fragmento

— Trina Choudhury
fuente

0

100% de trabajo! uso window.onload función en lugar de DOMContentLoaded

  <script>
      window.onload = function() {
      var div = document.getElementById("Content");
      var res = document.getElementById("Result");

      res.innerHTML = div.offsetHeight; 
    };
    </script>

Dará su resultado!

— Krishna Savani
fuente

0

Debe verificar el método element.getBoundingClientRect()después de cargar. Devolverá un conjunto de propiedades como ancho y alto.

— Lhew
fuente