給定已知寬度計算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 ，如MDN 網絡文檔上的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>

整個示例在此處的 CodeSnadbox 中：

Answer 2

我不確定我是否完全理解您的問題，但您可以使用 javascript 來計算 div 的高度。

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

Answer 3

您必須改用window.onload 。

load 事件在整個頁面加載后觸發，包括所有依賴資源，如樣式表和圖像。 這與 DOMContentLoaded 形成對比，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 4

我知道您要求在圖像加載后調整 div 的大小以使 div 更高，但作為旁注，您是否知道/是否嘗試過 background-size: contains？

按照 MDN 的規定：

包含值指定，無論包含框的大小如何，都應縮放背景圖像，使每一邊盡可能大，同時不超過容器相應邊的長度。

封面價值：

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

不是動態的，因為你設置了寬度，所以計算它並不難，因為它不會在不同的屏幕上改變。 但唯一的方法是使用開發工具手動完成。

如果圖像和字體會改變，你可以有一個 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。作為參考，你可以運行下面的代碼片段。

此代碼段對應於沒有圖像並使用 window.onload 的 div（因此高度為 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>

下面的代碼片段對應於帶有圖像和使用 window.onload 的 div，現在高度將達到預期的 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()方法。 它將返回一組屬性，例如寬度和高度。