Ich habe eine Frage, wie man eine Div-Höhe bekommt. Ich bin mir dessen bewusst .height()
und innerHeight()
, aber keiner von ihnen macht den Job für mich in diesem Fall. Die Sache ist, dass ich in diesem Fall ein Div habe, dessen Breite übergelaufen ist, einen Überlauf: scrollen und das Div hat eine feste Höhe.
Wenn ich .height()
oder verwende innerHeight()
, geben beide die Höhe des sichtbaren Bereichs an, aber wenn ich möchte, dass der Überlauf berücksichtigt wird, wie gehe ich vor?
.scrollHeight
DOM-Funktion in IE <8.0 ( developer.mozilla.org/en/DOM/element.scrollHeight ) nicht funktionierenscrollHeight
Außerdem wird manchmal ärgerlich Null zurückgegeben, wenn es ausgeblendet ist (oder wenn das übergeordnete Element ausgeblendet ist).overflow: hidden
: /document.getElementById('your_div').scrollHeight
Weitere Informationen zu
.scrollHeight
Eigenschaften finden Sie in den Dokumenten :quelle
Eine andere Möglichkeit wäre, das HTML in einem nicht überlaufenen Element zu platzieren: verstecktes Element außerhalb des Bildschirms platziert, wie eine Position absolut oben und links weniger als 5000px, dann diese Elementhöhe lesen. Es ist hässlich, aber gut funktionieren.
quelle
Ich habe mir gerade eine andere Lösung dafür ausgedacht, bei der es nicht mehr notwendig ist, einen Wert von viel bis hoher maximaler Höhe zu verwenden. Es werden einige Zeilen Javascript-Code benötigt, um die innere Höhe des reduzierten DIV zu berechnen, aber danach ist alles CSS.
1) Abrufen und Einstellen der Höhe
Holen Sie sich die innere Höhe des reduzierten Elements (mit
scrollHeight
). Mein Element hat eine Klasse.section__accordeon__content
und ich führe diese tatsächlich in einerforEach()
Schleife aus, um die Höhe für alle Bedienfelder festzulegen, aber Sie haben die Idee.2) Verwenden Sie die CSS-Variable, um das aktive Element zu erweitern
Verwenden Sie als Nächstes die CSS-Variable, um den
max-height
Wert festzulegen, wenn das Element eine.active
Klasse hat.Letztes Beispiel
Das vollständige Beispiel sieht also so aus: Durchlaufen Sie zuerst alle Accordeon-Panels und speichern Sie ihre
scrollHeight
Werte als CSS-Variablen. Verwenden Sie als Nächstes die CSS-Variable alsmax-height
Wert für den aktiven / erweiterten / offenen Status des Elements.Javascript:
CSS:
Und da hast du es. Eine adaptive Animation mit maximaler Höhe, die nur CSS und einige Zeilen JavaScript-Code verwendet (keine jQuery erforderlich).
Hoffe, dies hilft jemandem in der Zukunft (oder meinem zukünftigen Selbst als Referenz).
quelle
Für diejenigen, die nicht überlaufen, sondern sich mit negativem Abstand verstecken:
(hässlich, aber nur eine, die bisher funktioniert)
quelle
Eine andere einfache Lösung (nicht sehr elegant, aber auch nicht zu hässlich) besteht darin, ein Inneres zu platzieren und
div / span
dann seine Größe zu ermitteln ($(this).find('span).height()
).Hier ist ein Beispiel für die Verwendung dieser Strategie:
(In diesem speziellen Beispiel wird dieser Trick verwendet, um die maximale Höhe zu animieren und Animationsverzögerungen beim Reduzieren zu vermeiden (wenn für die Eigenschaft "maximale Höhe" eine hohe Zahl verwendet wird).
quelle