DIVs gleiche Höhe, aber wirklich

[Yeti]

Mojen,

ich versuche mich gerade an einer Seite, die ähnlich wie Netvibes arbeiten soll.
Bin eigentlich fast fertig, aber eine Sache nervt mich noch: Die Spalten, in denen sich die Boxen befinden, realisiere ich mit divs.
Jetzt tritt folgendes (bekannte) Problem auf: Wenn der Inhalt einer Box länger wird als die min-height, gehen die anderen nicht mit. Klar, denn die Höhe hängt nur vom Inhalt, nicht von den anderen "Spalten" ab.
Jetzt habe ich durch Googlen und Forensuche einen Trick gefunden, der aber nur optisch die Spalte verlängert. In Wirklichkeit ist es aber ein Hintergrundbild und die Spalte ist immer noch genauso klein wie vorher. Ich brauche aber unbedingt eine gleich hohe Spalte, da ich script.aculo.us einsetze, um die Boxen verschiebbar zu machen.

Wie kriege ich nun diese Boxen gleich hoch?

Gibt es irgendeine JavaScript-Eigenschaft, die ich übersehen habe?

Komischerweise klappt es auch mit Tabellen (igitt) nicht... wo liegt da mein Fehler?

Der Yeti

[wucher wichtel]

Hallo!

Gibt es irgendeine JavaScript-Eigenschaft, die ich übersehen habe?

Die Höhe per style-Objekt bei Spalte1 abfragen und per style-Objekt bei Spalte2 setzen. Ist es das, was du suchst?

ciao, ww

[Yeti]

Hi,

Die Höhe per style-Objekt bei Spalte1 abfragen und per style-Objekt bei Spalte2 setzen. Ist es das, was du suchst?

Ja, .style.height war auch mein erster Tipp. Leider ist diese Eigenschaft standardmäßig leer. Wenn ich dann per JavaScript einen Wert zuweise, z.B. '500px' wird die Box auch entsprechend angepasst. Aber leider wird sie dann nicht mehr automatisch größer, wenn der Inhalt länger wird, sondern der Inhalt geht über die Boxgrenze hinaus. (Inhalt wird per AJAX nachgeladen).

Der Yeti

[wucher wichtel]

Hallo!

Die Höhe per style-Objekt bei Spalte1 abfragen und per style-Objekt bei Spalte2 setzen. Ist es das, was du suchst?

Leider ist diese Eigenschaft standardmäßig leer. Wenn ich dann per JavaScript einen Wert zuweise, z.B. '500px' wird die Box auch entsprechend angepasst.

Du kannst damit nur inline-styles auslesen. Also müsstest du inline-styles angeben, oder das ausgelagerte CSS mit JavaScript auslesen. (1, 2 - Funktioniert aber AFAIK nicht browserübergreifend.) Ich würde inline-styles benutzen.

Aber leider wird sie dann nicht mehr automatisch größer, wenn der Inhalt länger wird, sondern der Inhalt geht über die Boxgrenze hinaus. (Inhalt wird per AJAX nachgeladen).

Dann rufe eben am Ende der Funktion, die den Inhalt nachlädt, die Funktion auf, die die Boxhöhe anpasst.

ciao, ww

[Yeti]

Hi,

Du kannst damit nur inline-styles auslesen. Also müsstest du inline-styles angeben, oder das ausgelagerte CSS mit JavaScript auslesen. (1, 2 - Funktioniert aber AFAIK nicht browserübergreifend.) Ich würde inline-styles benutzen.

Danke, das wäre eine Möglichkeit.

Dann rufe eben am Ende der Funktion, die den Inhalt nachlädt, die Funktion auf, die die Boxhöhe anpasst.

Funktioniert trotzdem nicht, weil die Höhe der Box ja immer noch 500 Pixel ist, aber der Inhalt ca. 850 Pixel ist und über die Boxgrenze hinaus schießt,

Der Yeti

[wucher wichtel]

Hallo!

Funktioniert trotzdem nicht, weil die Höhe der Box ja immer noch 500 Pixel ist, aber der Inhalt ca. 850 Pixel ist und über die Boxgrenze hinaus schießt,

Ich dachte, dass du eine Box hast, in der der Inhalt (850px) ist. Und die andere Box ist kleiner (500px) und du willst die kleinere an die größere anpassen?

Wenn dem nicht so ist, dann gebe der Box, die 500px groß ist, aber eigentlich 850px groß sein sollte keine Höhe. Dann lies diese per offsetHeight aus und setze sie mit style.height für die andere Box.

ciao, ww

[Yeti]

Hi,

Ich dachte, dass du eine Box hast, in der der Inhalt (850px) ist. Und die andere Box ist kleiner (500px) und du willst die kleinere an die größere anpassen?

Naja, ganz so einfach ist es leider nicht. Ich habe es nur vereinfacht dargestellt. Ich habe zur Zeit zwischen zwei und vier Boxen (je nach Usereinstellung), die zu Anfang 500 Pixel hoch sind. Dann werden Inhalte nachgeladen in jede dieser Boxen. Jetzt kann es sein, dass eine, zwei, drei oder alle Boxen größer werden.
Bisher habe ich schon die Höhe der größten ermittelt und könnte diese jetzt allen anderen zuweisen. Das Problem ist, wenn jetzt eine der Boxen noch größer als dieser Wert wird, weil noch mehr Inhalt nachgeladen wird, geht der Inhalt über die Boxgrenze hinaus, weil style.height den Wert starr festlegt.

Wenn dem nicht so ist, dann gebe der Box, die 500px groß ist, aber eigentlich 850px groß sein sollte keine Höhe. Dann lies diese per offsetHeight aus und setze sie mit style.height für die andere Box.

Das funktioniert leider nur genau einmal. :-(

Der Yeti

[Yeti]

Hi,

habe jetzt immerhin mit offsetHeight einen Kandidaten gefunden, der mir die richtige Höhe ausgibt. Allerdings sagt mir der Browser dann, diese Eigenschaft hätte nur eine Getter-Methode, keine Setter-Methode. Wenn ich aber über style.height den Wert zuweise, bleibt die Box starr auf diesem Wert, egal wie groß der Inhalt ist.

Der Yeti

[wahsaga]

hi,

habe jetzt immerhin mit offsetHeight einen Kandidaten gefunden, der mir die richtige Höhe ausgibt. Allerdings sagt mir der Browser dann, diese Eigenschaft hätte nur eine Getter-Methode, keine Setter-Methode. Wenn ich aber über style.height den Wert zuweise, bleibt die Box starr auf diesem Wert, egal wie groß der Inhalt ist.

Natürlich, so ist height in CSS ja auch immer noch definiert.

gruß,
wahsaga

[Yeti]

Hi,

Natürlich, so ist height in CSS ja auch immer noch definiert.

Richtig. Gibt es denn noch eine andere Möglichkeit?

Der Yeti

[Struppi]

Wenn ich aber über style.height den Wert zuweise, bleibt die Box starr auf diesem Wert, egal wie groß der Inhalt ist.

Bei mir nicht, du machst was falsch.

Struppi.

[Yeti]

Hi,

Bei mir nicht, du machst was falsch.

Hast du der Box auch eine Hintergrundfarbe gegeben, um dir das Ergebnis anzusehen? Zumindest bei mir im Firefox geht der Inhalt dann über die Boxgrenzen hinaus. Das ist doof, weil der Bereich dann nicht mehr Droppable ist.

Der Yeti

[Yeti]

Hi,

mir kam gerade ein Geistesblitz: Warum nicht einfach die Höhe aller Kindelemente der Box abrufen und addieren? Damit funktioniert es wunderbar!

Danke an alle, die mir geholfen haben!

Hier der Code fürs Archiv:

  
function GetContentHeight(element)  
{  
 var toReturn = 0;  
 if (element.childNodes.length > 0)  
  for (i in element.childNodes)  
   toReturn += (isNaN(element.childNodes[i].offsetHeight) ? 0 : element.childNodes[i].offsetHeight);  
 return toReturn;  
}  
  
function CheckHeight(ContainerArray)  
{  
 var maxHeight = 0;  
 ContainerArray.each(function(item) {  
  var itemHeight = GetContentHeight($(item));  
  if (itemHeight > maxHeight)  
   maxHeight = itemHeight;  
 });  
 ContainerArray.each(function(item) {  
  $(item).style.height = maxHeight + 'px';  
 });  
 setTimeout('CheckHeight('+ContainerArray.inspect()+')', 100);  
}  

CheckHeight funktioniert allerdings nur mit Prototype, aber man kann es leicht anpassen.

Der Yeti

[Struppi]

Hi,

mir kam gerade ein Geistesblitz: Warum nicht einfach die Höhe aller Kindelemente der Box abrufen und addieren? Damit funktioniert es wunderbar!

Wozu soll das gut sein?
Die Gesamthöhe ist offsetHeight

[code lang=JavaScript]
function GetContentHeight(element)
{
var toReturn = 0;
if (element.childNodes.length > 0)
  for (i in element.childNodes)

Warum läufst du über alle Objekteigenschaften und nicht normal über den Index?
Laß dir mal i ausgeben, du fragst hier alle möglichen Eigenschaften ab.

Bei mir macht der Code genau das, was du anderswo beschrieben hast, der Container wird kleiner als sein Inhalt.

Struppi.