DIV-Container rechts bis zum Fuß der Webseite füllen

[Anina]

Hi!

Ich habe da irgendwie grad ein kleines Problem...

Und zwar habe ich eine Webseite erstellt (Dreamweaver). Auf der rechten Seite ist ein Div-Container (soll so ne Art Rightbar werden), Navi ist oben.
Jetzt möchte ich, dass der Container sich mit der grauen Farbe der Länge der Seite anpasst (also quasi der Länge des Contents), leider ist der grau hinterlegte Teil immer nur so lang wie der Inhalt der Sidebar.

Hier mal ein Link zu einer der Seiten:


Ich könnte die Rightbar jetzt natürlich bei jeder Seite manuell verlängern, aber irgendwie wäre das nicht so im Sinne der Sache, da ich eine Vorlagenseite erstellt habe wo ich diesen Part nur einmalig abändern muss und er sich automatisch auf allen Seiten ändert. Nur wie ich dem Teil sage, dass es sich automatisch nach unten verlängern soll weiß ich irgendwie nicht. Und Google will mir auch nichts verraten...

Danke schonmal für eure Hilfe,
liebe Grüße
Anina

 

[cebito]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Such mal nach "faux columns", das löst dein Problem.

 

[Anina]

Schaue ich mal, klingt ja genau nach dem wonach ich suche...
... melde mich nochmal ob es geklappt hat.
Danke schonmal!

Hm... wäre wohl zu schön gewesen...

Bin exakt dieser Anleitung:
http://www.ohne-css.gehts-gar.net/0005.php

gefolgt. Leider wird es bei mir in keinem der Browser angezeigt. Da ich jetzt leider erstmal weg muss, probiere ich es morgen nochmal, bzw. nochmal eine andere Anleitung oder so...

lg

 

[Misco]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Mir ist folgender Trick bekannt:

Sidebar: padding-bottom: 10000px; margin-bottom: -10000px;
Container: overflow: hidden;

 

[simonpicos]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Mir ist folgender Trick bekannt:

Sidebar: padding-bottom: 10000px; margin-bottom: -10000px;
Container: overflow: hidden;

Na das ist aber wohl ein sehr unschöner workaround

 

[Misco]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

klappt aber meist prima und man muss keine Grafiken basteln oder zusätzliche divs anlegen

 

[cebito]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

klappt aber meist prima und man muss keine Grafiken basteln oder zusätzliche divs anlegen

Nur dumm, wenn der mal länger wird als der Content und Content auch nicht den Hintergrund vom übergeordneten Container besitzt... :uhm:
Dann sieht das Ganze so aus:



dasselbe in "Grün"...

 

[Myhar]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Das war auch eine schlechte Anleitung.
Wie Misco schon kurz erklärt hat, gibt es dafür bessere Methoden. Eine detailliertere Anleitung für Miscos Technik ist hier zu finden. Damit solltest du keine Probleme haben, dein gewünschtes Layout zu erreichen.

 

[Herr_D]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Bei dem beispiel da oben (wobei das Grau ziemlich *hust aussieht) würd ich immer mit 'nem Hintergrundbild für den wrapper arbeiten... breite weiß px/ grau px mal 2px höhe sind 2kb und eine zeile code im css...

 

[schnullerbacke]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Ich würd's auch machen wie Herr_D vorschlägt.

Um das div "sidebar" und das div "content" evtl. noch ein umschließendes Div bauen.
Dieses bekommt dann als Hintergrund ein Bild mit 840px Breite, 1 oder 2 px Höhe, Rechts grau - links weiß oder transparent. (Das grau so breit, wie die rechte Spalte ist).

Die Hintergrundfarbe vom Div Sidebar kannst du dann entfernen.

 

[Myhar]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Warum ich die Lösung mit der Grafik nicht empfehle: Die Spalten sind danach nicht mehr skalierbar.
Da kann ich gleich ein Tabellenlayout machen, ist auch nur ein wenig Code und funktioniert genauso....

 

[burn4ever]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Hmmm,
wie wäre es denn via css über "height":


Mit height:100%; skalliert der div sich immer bis auf die Größe seines Eltern-Elementes.

 

[golodhrim]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Hmmm,
wie wäre es denn via css über "height":


Mit height:100%; skalliert der div sich immer bis auf die Größe seines Eltern-Elementes.

Dies sollte der weg zum gehen sein. wenn sich das div ueber css height auf 100% skaliert so sollte dein grauer balken bis zum footer laufen und buendig abschliesen. Sehr gute Quellen sind hier auch immer selfhtml.

 

[cebito]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Hmmm,
wie wäre es... Mit height:100%; skalliert der div sich immer bis auf die Größe seines Eltern-Elementes.

Dies sollte der weg zum gehen sein.

Vielleicht solltet ihr eure Links selbst mal lesen. height in % funktioniert nur, wenn das Elternelement eine definierte Höhe hat. Woher sollten sich die 100% auch sonst ableiten?

 

[Anina]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Hallo!

So, nochmal alle Posts durchgelesen und da der Quellcode ab und an mein Feind ist (sonst würde ich ja auch nicht Dreamweaver benutzen) mich für den recht einfachen Weg von Misco entschieden.
Auch wenn das wohl eher "quick & dirty" ist, es passt alles.

Danke euch für die vielen Posts und die zahlreiche Hilfe!

lg
Anina

PS: Herr D: Naja, die Firmenfarben des Kunden sind halt manchmal König

 

[dragobert]

AW: DIV-Container rechts bis zum Fuß der Webseite füllen

Solche Probleme löst man anders:
Man hat z.B. ein Hauptcontainer der zwei weitere DIVs beinhaltet,
z.B. Sidebar und Content. Die Sidebar läßt man so wie sie ist, auch
wenn es mehrere sind. Diese haben selbst keinen Hintergrund.

Der Hintergrund einer Sidebar ist auf "none" oder auf "transparent" gesetzt.
Das einzige was wächst ist der Content-DIV. Dem muss sich dann auch der
Hauptcontainer anpassen. Der wächst zwangsläufig mit.

Die Sidebars haben ihre eigene Größe. Ist da nur eine einzige Zeile Inhalt drin,
ist die Sidebar auch nur eine einzige Zeile hoch. Da aber der Hintergrund
nicht vorhanden ist, sieht man dern Hintergrund des Hauptcontainers durch.

Der "Trick ist also dass man den Hintergund des Hauptbodys so setzt
dass er die Sidebar vorgaukelt. z.B. eine Hintergrundgrafik die genauso breit ist
wie der Hintergrund und z.B. 20px hoch ist, aber eine "Sidebarfläche" hat.

Der Hintergrund wächst mit, die Sidebars bleiben so wie sie sind,
da sie aber keinen eigenen Hintergrund haben, scheint der Hintergrund
des Hauptbodys durch und das sieht dann so aus, als wenn die Sidebars
"mitwachsen" würden.

Auf meiner Domain www.gazdik.de kannst du genau das sehen.
Man sieht 2 graue Seitenflächen die aussehen wie 2 Sidebars.
Es sind auch 2 Sidebars jedoch durchsichtig. Die zwei grauen Flächen
und die eine weisse Fläche in der Mitte ist eine einzige Grafik
nämlich der Hintergurnd vom Hauptbody.

Die Zweie möglichkeit ist ähnlich. Der Hintergrund des hauptbodys hat
die Farbe oder die Grafik die man sich als Sidebar wünscht.
Der Content ist auf z.B. Weiss, die Sidebar durchsichtig.