offsetHeight ergibt falschen Wert

[Trtix]

Hallo erstmal,
Ich habe ein Problem bei der Benutzung von "offsetHeight".

Hier erstmal das Bild:

Prinzipiell sieht das ganze in vereinfachter Form so aus (HTML):
<div id="main">
  <div id="slideshow"></div>
  <div id="divline"></div>
  <div id="content"></div>
</div>

#main, sowie #divline haben eine min-height von 441px. Wenn der Inhalt von #content nun länger ist, möchte ich, dass die Trennlinie (#divline) sich diesem anpasst.

Dafür habe ich Javascript folgende Funktion geschrieben:
function divline()
{
  document.getElementById("divline").style.height = document.getElementById("content").offsetHeight + "px";
}

Das ganze wird per onload im Body Tag ausgeführt.

Was übersehe ich, dass da nicht der korrekte Wert bei rauskommt? Wie man auf dem Bild sieht fehlen ein paar Pixel (laut Firebug hat #divline eine Höhe von 836px, #content 932px bekommen).

Sieht jemand den Fehler? Oder habe ich vielleicht noch CSS-Anweisungen, die den Fehler hervorrufen könnten?

Vielen Dank schon einmal!

[Cheatah]

Hi,

Was übersehe ich, dass da nicht der korrekte Wert bei rauskommt?

Du übersiehst,

• dass ein <div>-Element ohne Inhalt sehr, sehr offensichtlich absolut sinnfrei ist und somit im HTML-Code nichts verloren hat.
• dass ein border und ähnliche Eigenschaften Deine Bedürfnisse voll und ganz befriedigen.
• wie die Seite ohne Dein JavaScript aussieht, und dass die Höhe völlig richtig erkannt wird und sich durch Dein JavaScript verändert wird.

Cheatah

[Trtix]

Danke schon einmal für die Antworten. Die Problematik verstehe ich nun!

• dass ein border und ähnliche Eigenschaften Deine Bedürfnisse voll und ganz befriedigen.

Problem an der Sache ist, der graue Kasten (#slideshow) hat ja nen float: left und soll ja nicht mitwachsen.
Wenn ich dem #content nun einen border-left gebe, setzt er ihn ja ganz nach links, weil unter #slideshow auch inhalt von #content ist.
Das ist der Grund warum ich noch einen <div> container dazwischen gesetzt habe, als Trennung halt.

Oder habe ich ein Brett vorm Kopf, dass ich dieses Problem mit CSS ganz leicht lösen könnte?

[Trtix]

Oder habe ich ein Brett vorm Kopf, dass ich dieses Problem mit CSS ganz leicht lösen könnte?

Margin-left :) Alles klar, danke für die Aufklärung / Hilfe, habe wirklich zu kompliziert gedacht!

[molily]

Hallo,

Grundlagen für Spaltenlayout mit CSS:
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
Solange der Server nicht erreichbar ist:
http://web.archive.org/web/20090627020945/http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

Mathias

[molily]

Hallo,

function divline()
{
  document.getElementById("divline").style.height = document.getElementById("content").offsetHeight + "px";
}

Es ist eine schlechte Idee, eine Funktion so zu nennen, wie die ID eines Elements, denn Browser legen für ein solches Element bereits eine globale Variable an. Das kann in einigen Browsern zu einer Exception führen.

Was übersehe ich, dass da nicht der korrekte Wert bei rauskommt?

Dass der Content am Anfang, bevor du das DIV vergrößerst, eben diese Höhe hat, weil der Text links unter dem grauen Bereich auf voller Breite fließt. Erhöhst du #divline nun, wird die Spalte schmaler und der Text fließt anders, sodass #content höher wird. Verwendest du die Höhe vom Anfang, so ist #divline nicht hoch genug.

Davon abgesehen scheint mir deine Lösung unnötig kompliziert. Warum verwendest du nicht einfach border-left vom #content, anstatt leere div-Elemente rein für die Darstellung einzufügen und deren Größe mit JavaScript zu setzen?

Zum Thema »gleich lange Spalten« gibt es zudem verschiedene CSS-Lösungen. Allerdings handelt es sich bei deinem Strich ja mehr um ein Gestaltungselement, das im Markup eigentlich nichts zu suchen hat.

Grüße,
Mathias

[T-Rex]

Also normalerweise gehe ich immer auf die Fragen ein, aber in diesem Fall muss ich mal fragen wieso Javascript?
Das geht auch mit css!

1. würde ich den Content im HTML Code über das Menü packen. Somit wird der
Content wichtiger und bekommt eine höhere Gewichtung bei Google.

2. Content und Menü link jeweils mit float: right; also:
<div class='content'></div>
<ul class='menu_left'></ul>
.content{float: right;}
.menu_left{float: right;}

3. Der Content bekommt einen linken Border und das Menü einen rechten:
.content{float: right; border-left: 2px solid red;}
.menu_left{float: right; border-right: 2px solid red;}

4. Damit man nicht beide Border sieht müssen sie sich überlappen. Das erreicht man in dem man eine Box über die andere schiebt. In meinem Beispiel mache ich das mit dem Content, dass bekommt eine margin-left: -2px;
.content{float: right; border-left: 2px solid red; margin-left: -2px;}
.menu_left{float: right; border-right: 2px solid red;}

Kannst du natürlich mit min-height noch aufwerten das ganze. Hoffe das Prinzip ist klar.

Gruß
min-height: 186cm
T-Rex