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

Question

I have a div that contains a picture and some text (the image is of the variable size and the text is of the variable length).
Is there any way to calculate the height required to fit all the div content, given that the exact width is predefined?

UPD getting same wrong result when using $(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

To accurately determine the height of the div and the image. This is because the image will likely finish loading last - if the height of the container is checked before the image is loaded, it will return height without taking the image height into consideration.

A listener should be added to the image so it checks the height once the image loads.

img.addEventListener('load', onLoad);

Because the styling is simple, offsetHeight and clientHeight should work but to include the entire element (with border and margin) use scrollHeight as described by Element.scrollHeight on MDN web docs

The resulting code:

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

The whole example is in a CodeSnadbox here:

Answer 2

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

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

Answer 3

You have to use window.onload instead.

The load event is fired when the whole page has loaded, i ncluding all dependent resources such as stylesheets and images . This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded , without waiting for resources to finish loading. ^ref

In your case you need to wait for the image and not only the 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

I know that you are asking to resize the div once the image loads to make the div taller, but just as a side comment, do you know/have you tried background-size: contains?

As specified by MDN:

The contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container.

The cover value:

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.

When combined with background-position I think it can be really useful

Answer 5

if u want to use jquery then this is the way

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

Not dynamically, since you have the width set it wouldn't be hard to calculate it because it won't change in different screens. But the only way is doing it MANUALLY USING DEV TOOLS.

If the image and the font will change, you can have a javascript script that after onlaod it will see what height does the div has. (if you need this comment below)

Answer 7

In js you can get the height of any element. width is not at all needed to calculate height.

since div is some generic tag, add some id to make specific to make sure the right tag is targeted to calculate height

 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

You can use .scrollHeight property.

 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

DOMContentLoaded event is fired when the browser fully loads the HTML and the DOM tree is built, but external resources like pictures and stylesheets are not yet loaded. While window.onload event is fired when the whole page is loaded including styles, images, and other resources.

And you got the height as 252 rather than 360 because the height of the div without your image is 252. For reference, you can run the below snippet.

This code snippet corresponds to div without image and using window.onload (So height is 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>

This following code snippet corresponds to div with image and using window.onload and now the height will come up to be 360 as expected.

 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% Working! use Window.onload function instead of DOMContentLoaded

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

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

Will give your Result!

Answer 11

You should check the method element.getBoundingClientRect() after loading. It will return a set of properties such as width and height.