计算给定已知宽度的div高度？

Question

我有一个div，其中包含图片和一些文本（图像的大小可变，文本的长度可变）。
给定精确的宽度，有什么方法可以计算适合所有div内容的高度？

使用$(document).ready()时，UPD得到相同的错误结果

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>

Answer 1

准确确定div和图像的高度。 这是因为图像很可能最后完成加载-如果在加载图像之前检查容器的高度，它将返回高度而不会考虑图像的高度。

应该在图像上添加一个侦听器，以便在图像加载后检查高度。

img.addEventListener('load', onLoad);

由于样式简单，offsetHeight和clientHeight应该可以使用，但要包含整个元素（带有边框和边距），请使用scrollHeight，如Element.scrollHeight on MDN web docs所述

结果代码：

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

整个示例在此处的CodeSnadbox中：

Answer 2

我不确定我是否完全理解您的问题，但是您可以使用javascript计算div的高度。

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

Answer 3

您必须改用window.onload。

  

加载整个页面后会触发load事件，不包括所有相关资源，例如样式表和图像。这与DOMContentLoaded相反，DOMContentLoaded在页面DOM加载完成后立即触发，而无需等待资源完成加载。 ^ref

在您的情况下，您需要等待图像，而不仅仅是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>

Answer 4

我知道您要在加载图像以使div更高时要求重新调整div的大小，但是作为侧面注释，您是否知道/是否尝试过background-size：包含？

由MDN指定：

contain值指定，无论容纳框的大小如何，都应缩放背景图像，以使每一侧尽可能大，同时又不超过容器相应侧的长度。

保护价值：

cover值指定背景图像的大小，以使其尽可能小，同时确保两个尺寸都大于或等于容器的相应尺寸。尝试调整以下示例的大小，以查看实际效果。

结合背景位置，我认为它真的很有用

Answer 5

如果您想使用jquery，那就是这种方式

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

Answer 6

不是动态的，因为您已经设置了宽度，所以计算起来不会很困难，因为在不同的屏幕中它不会改变。 但是唯一的方法是手动使用DEV TOOLS。

如果图像和字体会改变，您可以使用一个javascript脚本，该脚本在onlaod之后将显示div的高度。 （如果您在下面需要此评论）

Answer 7

在js中，您可以获取任何元素的高度。 宽度根本不需要计算高度。

由于div是一些通用标签，因此请添加一些ID以使其具体化，以确保使用正确的标签来计算高度

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>

Answer 8

您可以使用.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>

Answer 9

当浏览器完全加载HTML并构建DOM树时，会触发

DOMContentLoaded 事件，但尚未加载外部资源（如图片和样式表）。 当加载整个页面（包括样式，图像和其他资源）时，会触发 window.onload 事件。

您将高度设置为 252而不是360 ，因为没有图片的div的高度为252。作为参考，您可以运行以下代码段。

  

此代码段对应于没有图像并使用的div   window.onload（所以高度为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>

  

此以下代码段对应于带图片和使用的div   window.onload，现在高度将达到预期的360。

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>

Answer 10

100％工作！使用 Window.onload 函数代替 DOMContentLoaded

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

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

将给出您的结果！

Answer 11

加载后，应检查方法element.getBoundingClientRect()。它将返回一组属性，例如宽度和高度。