Div Höhe bei bekannter Breite berechnen?

8

Ich habe ein div, das ein Bild und etwas Text enthält (das Bild hat die variable Größe und der Text die variable Länge).
Gibt es eine Möglichkeit, die Höhe zu berechnen, die erforderlich ist, um den gesamten div-Inhalt anzupassen, da die genaue Breite vordefiniert ist?

UPD erhält bei Verwendung das gleiche falsche Ergebnis $(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>

Erweitern Sie das Snippet

javascript css

— user626528
quelle

2

@ Rob ist das nicht eine legitime Frage, was es vom Thema abhebt?

— Tom M

Möchten Sie einen Javascript-Weg oder reines CSS?

— Bobtroopo

@ Bobtroopo JS wäre in Ordnung.

— user626528

2

AFAIK Sie können vor dem Laden des Bildes nicht die richtige Höhe ermitteln, da Sie die Bildgröße nicht kennen. Ich denke also, dass Sie erst nach dem Laden des Bildes den richtigen Wert erhalten können, wenn Sie onloaddann die Höhe innerhalb des Rückrufs ermitteln

— Calvin Nunes,

ist Jquery in Ordnung?

— Fahim Khan

2

Sie müssen window.onloadstattdessen verwenden.

Das Ladeereignis wird ausgelöst, wenn die gesamte Seite geladen wurde, einschließlich aller abhängigen Ressourcen wie Stylesheets und Bilder . Dies steht im Gegensatz zu DOMContentLoaded, das ausgelöst wird , sobald das Seiten-DOM geladen wurde , ohne darauf zu warten, dass die Ressourcen vollständig geladen werden . ^ref

In Ihrem Fall müssen Sie auf das Bild und nicht nur auf das DOM warten.

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>

Erweitern Sie das Snippet

— Temani Afif
quelle

5

Um die Höhe des Div und des Bildes genau zu bestimmen. Dies liegt daran, dass das Bild wahrscheinlich zuletzt vollständig geladen wird. Wenn die Höhe des Containers vor dem Laden des Bilds überprüft wird, wird die Höhe ohne Berücksichtigung der Bildhöhe zurückgegeben.

Dem Bild sollte ein Listener hinzugefügt werden, der die Höhe nach dem Laden des Bildes überprüft.

img.addEventListener('load', onLoad);

Da das Styling einfach ist offsetHeightund clientHeightfunktionieren sollte, aber das gesamte Element (mit Rand und Rand) einbeziehen soll, verwenden Sie es scrollHeightwie in Element.scrollHeight in MDN-Webdokumenten beschrieben

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

Das ganze Beispiel befindet sich hier in einer CodeSnadbox:

— Seth Corker
quelle

2

Ich bin nicht sicher, ob ich Ihre Frage vollständig verstehe, aber Sie können Javascript verwenden, um die Höhe eines Div zu berechnen.

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

— Armedin Kuka
quelle

Es sieht nicht so aus, als ob diese Messung korrekt ist, da ich 252 bekomme und der tatsächliche Div eher 350 Pixel hoch aussieht. Außerdem erhalte ich sofort nach dem Öffnen des Dokuments und nach dem Aktualisieren (Firefox) unterschiedliche Messwerte.

— user626528

Es gibt noch einen anderen Weg : document.getElementsByTagName('div').getBoundingClientRect().height. Probieren Sie es aus und lassen Sie mich wissen, ob es funktioniert.

— Armedin Kuka

1

Gleiches Problem mit diesem. Vielleicht geht es um verschiedene Rendering-Phasen?

— user626528

1

Ich weiß, dass Sie darum bitten, die Größe des Div zu ändern, sobald das Bild geladen ist, um das Div größer zu machen, aber nur als Nebenkommentar, wissen Sie / haben Sie versucht, Hintergrundgröße: enthält?

Wie von MDN angegeben:

Der Contain-Wert gibt an, dass das Hintergrundbild unabhängig von der Größe des enthaltenen Felds so skaliert werden soll, dass jede Seite so groß wie möglich ist und die Länge der entsprechenden Seite des Containers nicht überschreitet.

Der Deckungswert:

Der Deckungswert gibt an, dass das Hintergrundbild so klein wie möglich sein soll, während sichergestellt wird, dass beide Abmessungen größer oder gleich der entsprechenden Größe des Containers sind. Versuchen Sie, die Größe des folgenden Beispiels zu ändern, um dies in Aktion zu sehen.

In Kombination mit der Hintergrundposition denke ich, dass es wirklich nützlich sein kann

— Jenaro Calviño
quelle

1

Wenn Sie jquery verwenden möchten, ist dies der Weg

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

Erweitern Sie das Snippet

— Fahim Khan
quelle

Sind Sie im Ernst? jquery gilt jetzt als die Reinkarnation des Teufels, lässt sie mit reinem js verrückt werden.

— Fabio Caccamo

0

Nicht dynamisch, da Sie die Breite eingestellt haben, ist es nicht schwierig, sie zu berechnen, da sie sich in verschiedenen Bildschirmen nicht ändert. Der einzige Weg ist jedoch, DEV TOOLS MANUELL ZU VERWENDEN.

Wenn sich das Bild und die Schriftart ändern, können Sie ein Javascript-Skript verwenden, das nach dem Onlaod anzeigt, welche Höhe das Div hat. (wenn Sie diesen Kommentar unten benötigen)

— Renaldo Balaj
quelle

0

In js können Sie die Höhe jedes Elements ermitteln. Die Breite wird zur Berechnung der Höhe überhaupt nicht benötigt.

Da div ein generisches Tag ist, fügen Sie eine ID hinzu, um sicherzustellen, dass das richtige Tag zur Berechnung der Höhe verwendet wird

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>

Erweitern Sie das Snippet

— Ganeshkumar K.
quelle

0

Sie können die Eigenschaft .scrollHeight verwenden .

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>

Erweitern Sie das Snippet

— Kalimah
quelle

0

Das DOMContentLoaded- Ereignis wird ausgelöst, wenn der Browser den HTML- Code vollständig lädt und der DOM-Baum erstellt wird, externe Ressourcen wie Bilder und Stylesheets jedoch noch nicht geladen sind. Während das window.onload- Ereignis ausgelöst wird, wenn die gesamte Seite einschließlich Stilen, Bildern und anderen Ressourcen geladen wird.

Und Sie haben die Höhe 252 anstatt 360, weil die Höhe des Div ohne Ihr Bild 252 beträgt. Als Referenz können Sie das folgende Snippet ausführen.

Dieses Code-Snippet entspricht div ohne Bild und mit window.onload (Höhe also 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>

Erweitern Sie das Snippet

Dieses folgende Code-Snippet entspricht div mit image und using window.onload und jetzt wird die Höhe erwartungsgemäß 360 betragen.

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>

Erweitern Sie das Snippet

— Trina Choudhury
quelle

0

100% arbeiten! Verwenden Sie die Window.onload- Funktion anstelle von DOMContentLoaded

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

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

Wird Ihr Ergebnis geben!

— Krishna Savani
quelle

0

Sie sollten die Methode element.getBoundingClientRect()nach dem Laden überprüfen . Es wird eine Reihe von Eigenschaften wie Breite und Höhe zurückgegeben.

— Luh
quelle