在给定宽度的情况下计算 div 高度？

Question

我有一个包含图片和一些文本的 div（图像的大小可变，文本的长度可变）。考虑到预定义的确切宽度，有没有办法计算适合所有 div 内容所需的高度？UPD 使用时得到相同的错误结果 $(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>

Answer 1

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

应将侦听器添加到图像中，以便在图像加载后检查高度。

img.addEventListener('load', onLoad);

因为样式很简单，offsetHeight并且clientHeight应该可以工作，但要包含整个元素（带边框和边距）使用scrollHeight，如MDN web docs 上 Element.scrollHeight所述

结果代码：

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

Answer 2

你必须window.onload改用。

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

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

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

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