Calcular a altura da div, dada uma largura conhecida?

8

Eu tenho uma div que contém uma imagem e algum texto (a imagem é do tamanho variável e o texto é do tamanho variável).
Existe alguma maneira de calcular a altura necessária para caber todo o conteúdo div, considerando que a largura exata é predefinida?

UPD obtendo o mesmo resultado errado ao 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 snippet

javascript css user626528
fonte
2
@Rob não é uma pergunta legítima o que o torna fora de tópico?
Tom M
Gostaria de uma maneira javascript ou css puro?
Bobtroopo 27/11/19
@BtroBroopo JS ficaria bem.
user626528
2
AFAIK, você não pode obter a altura correta antes do carregamento da imagem, pois não sabe o tamanho da imagem. Então eu acho que você só poderia obter o valor correto após a carga de imagem, usando onloadem seguida, ficando a altura dentro do callback
Calvin Nunes
Jquery está bom?
Fahim Khan

Respostas:

2

Você tem que usar em seu window.onloadlugar.

O evento load é acionado quando a página inteira é carregada, incluindo todos os recursos dependentes, como folhas de estilo e imagens . Isso contrasta com o DOMContentLoaded, que é acionado assim que o DOM da página é carregado , sem aguardar o término do carregamento dos recursos. ref

No seu caso, você precisa aguardar a imagem e não apenas o 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 snippet

Temani Afif
fonte
5

Para determinar com precisão a altura da div e da imagem. Isso ocorre porque a imagem provavelmente terminará o carregamento por último - se a altura do contêiner for verificada antes do carregamento da imagem, ela retornará a altura sem levar em consideração a altura da imagem.

Um ouvinte deve ser adicionado à imagem para verificar a altura após o carregamento da imagem.

img.addEventListener('load', onLoad);

Como o estilo é simples offsetHeighte clientHeightdeve funcionar, mas para incluir o elemento inteiro (com borda e margem), use scrollHeighto descrito por Element.scrollHeight nos documentos da web do MDN

O 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>

O exemplo inteiro está em um CodeSnadbox aqui:

Editar calcular altura da div - largura conhecida - JS

Seth Corker
fonte
2

Não sei se entendi completamente sua pergunta, mas você pode usar o javascript para calcular a altura de uma div.

var height = document.getElementsByTagName('div').offsetHeight;
Armedin Kuka
fonte
Não parece que essa medida esteja correta, pois estou recebendo 252 e a div real parece mais com 350 pixels de altura. Além disso, estou recebendo medidas diferentes imediatamente após abrir o documento e depois de atualizá-lo (Firefox).
user626528
Não há outra maneira: document.getElementsByTagName('div').getBoundingClientRect().height. Experimente isso e deixe-me saber se funciona.
Armedin Kuka
1
Mesmo problema com este. Talvez seja algo sobre diferentes estágios de renderização?
user626528
1

Eu sei que você está pedindo para redimensionar a div assim que a imagem carregar para torná-la mais alta, mas apenas como um comentário lateral, você sabe / já tentou o tamanho do plano de fundo: contém?

Conforme especificado pelo MDN:

O valor de retenção especifica que, independentemente do tamanho da caixa que contém, a imagem de plano de fundo deve ser dimensionada para que cada lado seja o maior possível, sem exceder o comprimento do lado correspondente do contêiner.

O valor da capa:

O valor da capa especifica que a imagem de plano de fundo deve ser dimensionada para que seja a menor possível, garantindo ao mesmo tempo que ambas as dimensões sejam maiores ou iguais ao tamanho correspondente do contêiner. Tente redimensionar o exemplo abaixo para ver isso em ação.

Quando combinado com a posição de fundo, acho que pode ser realmente útil

Jenaro Calviño
fonte
1

se você quiser usar jquery, então este é o caminho

$(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 snippet

Fahim Khan
fonte
Você está falando sério? jquery agora é considerado a reencarnação do diabo, deixa-os enlouquecer com js puros.
Fabio Caccamo
0

Não dinamicamente, já que você tem a largura definida, não seria difícil calculá-lo porque não mudará em telas diferentes. Mas a única maneira é fazê-lo manualmente usando as ferramentas DEV.

Se a imagem e a fonte mudarem, você pode ter um script javascript que, depois de ativado, verá qual a altura da div. (se você precisar deste comentário abaixo)

Renaldo Balaj
fonte
0

Em js, você pode obter a altura de qualquer elemento. largura não é necessária para calcular a altura.

como div é uma tag genérica, adicione um ID para especificá-la para garantir que a tag correta seja direcionada para calcular a 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 snippet

Ganeshkumar K
fonte
0

Você pode usar a propriedade .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 snippet

Kalimah
fonte
0

O evento DOMContentLoaded é acionado quando o navegador carrega totalmente o HTML e a árvore DOM é criada, mas recursos externos como imagens e folhas de estilo ainda não foram carregados. Enquanto oevento window.onload é acionado quando a página inteira é carregada, incluindo estilos, imagens e outros recursos.

E você tem a altura de 252 em vez de 360 porque a altura da div sem a sua imagem é 252. Para referência, você pode executar o trecho abaixo.

Esse trecho de código corresponde a div sem imagem e usando window.onload (a altura é 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 snippet

O trecho de código a seguir corresponde a div com imagem e usando window.onload e agora a altura chegará a 360 conforme o esperado.

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 snippet

Trina Choudhury
fonte
0

100% trabalhando! uso window.onload função em vez de DOMContentLoaded

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

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

Vai dar o seu resultado!

Krishna Savani
fonte
0

Você deve verificar o método element.getBoundingClientRect()após o carregamento. Ele retornará um conjunto de propriedades como largura e altura.

Lhew
fonte