<div> bis ans Seitenende mit JS dynamisch ziehen

[befubo]

Halli Hallo liebe jswelt-Community

Ich sage zum ersten Mal hallo hier, also. HALLO!
Ein kleines Problem auf meiner neuen Seite:

Bitte schaut euch mal folgende Seite an:
Diamond Dog

Wie ihr seht, habe ich ein div namens ".page_main", welches als Streifen von oben bis ans untere Seitenende gehen soll.
Darin befindet sich der container ".page_content", welcher der Inhalt, in diesem Falle die verschiedenen Angebote, enthält.
Wenn kein Link aufgeklappt ist, sieht es wunderbar aus. Jetzt kann man aber die verschiedenen Angebote ausklappen.
Dafür habe ich folgenden Code verwendet:

<a href="javascript:toggle('id1')">Waschen</a>
<br /><div id="id1" style="display: none">Die individuell für die verschiedenen Haut- und Felltypten ausgewählten Shampoos garantieren ein optimales Schlussergebnis.<br><br></div>

<a href="javascript:toggle('id2')">Kämmen / Bürsten</a>
<br /><div id="id2" style="display: none">Durch kämmen und bürsten des Tieres wird die Unterwolle entfernt. Dies ermöglicht es der Haut, besser durch das Fell zu atmen.<br><br></div>

etc...

Jetzt ist das Problem, dass sich zwar der ".page_content" schön an den Inhalt anpasst, der ".page_main" aber an der Stelle bleibt, an der das vorherige Seitenende war.
Ist es jetzt möglich, mit JS dieses immer auf 100% höhe zu strecken? Denn CSS merkt natürlich nicht, dass ich mit JS den Content verlängert habe und passt sich dementsprechend auch nicht ans neue Seitenende an...

Hier noch der CSS Code von den Containern:

.page_main{
position: absolute;
width: 1000px;
height: 100%;
bottom: 0px;
background-color: #9c9cde;
left: 50%;
top: 360px;
margin-left: -500px;
}

.page_content{
position: absolute;
width: 750px;
height: auto;
background-color: #7b7bd2;
left: 50%;
top: 100px;
margin-left: -395px;
padding: 20px;
color: #27276d;
border-right: solid 2px #6869cd;
border-bottom: solid 2px #6869cd;
}

Könnt ihr mir da mal auf die Sprünge helfen?
Vielen Dank und freundliche Grüsse aus der Schweiz

befubo

[kkapsner]

Dafür braucht man kein JS, sondern exakt für sowas ist CSS gedacht.

Du darfst einfach nicht alle deine Elemente über position: absolute; positionieren. Dann kann sich das äußere <div> auch an die Höhe des inneren anpassen.

Dein Problem existiert übrigens nicht nur, wenn du was ausklappst, sondern auch schon, wenn ein Besucher einfach ein etwas kleineres Browserfenster hast...

[mikdoe]

Verschoben.

[befubo]

Hi kkapsner

Hm, das Problem ist, dass ich bald alle Variantionen von height, position, display und overflow durchhabe und ich einfach ein Blackout habe.
Ich krieg's einfach nicht hin, dass sich das *** .page_main immer bis nach unten zieht, wenn sich der Inhalt verlängert... Vor allem finde ich es merkwürdig, dass es beim .page_content mit dem Text geht, aber beim .page_main es einfach nicht funktioniert...

[kkapsner]

Bei den beiden <div>s, um die es geht, musst du weder height noch position noch display noch overflow angeben. Per margin: 0 auto; bekommst du sie mittig und mit geeigneten padding-Werten bekommst du die Abstände richtig hin.

Damit die <div>s dann auch vertikal an der richtigen Stelle sind, dürfen die <div>s drüber natürlich auch kein position: absolute; haben - was sie aber genausowenig brauchen...

[befubo]

Also, ich hab jetzt mal bei allen containern (ausser bei .l und .r) die position: absolute; rausgenommen.
Es funktioniert jetzt super, dass sich auch der .page_main beim ändern des .page_content verlängert.
Dafür danke ich schonmal recht herzlich.

Jetzt ist aber das Problem, dass der .page_main wieder nicht bis ans untere Seitenende gezogen wird...
Hier nochmals der Zwischenstand:
Diamond Dog

Jetzt kann ich ja nicht mehr mit height: 100% arbeiten...
Wie kann ich jetzt den Container trotzdem bis ans untere Seitenende ziehen?

Vielen Dank und liebe Grüsse
befubo

[j-l-n]

Also, ich hab jetzt mal bei allen containern (ausser bei .l und .r) die position: absolute; rausgenommen.
Es funktioniert jetzt super, dass sich auch der .page_main beim ändern des .page_content verlängert.
Dafür danke ich schonmal recht herzlich.

Jetzt ist aber das Problem, dass der .page_main wieder nicht bis ans untere Seitenende gezogen wird...
Hier nochmals der Zwischenstand:
Diamond Dog

Jetzt kann ich ja nicht mehr mit height: 100% arbeiten...
Wie kann ich jetzt den Container trotzdem bis ans untere Seitenende ziehen?

Vielen Dank und liebe Grüsse
befubo

Irgendwie erwarte ich bei der Seite andauernd, noch weiter runterscrollen zu können... Weiß auch nicht, woran das liegt

[befubo]

Irgendwie erwarte ich bei der Seite andauernd, noch weiter runterscrollen zu können... Weiß auch nicht, woran das liegt

Wie kann ich das verstehen? xD War das jetzt Doppeldeutig oder ist das tatsächlich so? ^^

[kkapsner]

Dir geht es um den lila Streifen, oder?

Da gibt es mehrere Methoden. Eine wäre z.B. alle lila Teile durch ein einzelnes <div> zu realisieren, dass du dann wieder mit height: 100% versehen kannst.
Eine andere wäre es, kein <div> lila zu machen, sondern dem <body> ein Hintergrundbild zu geben, das zentriert ist und einfach einen lila Streifen darstellt.

[befubo]

Doh!
warum bin ich nicht auf die Idee mit dem BG gekommen -.-
Danke! So klappts tip top

[kkapsner]

Bitte - gern geschehen.