Div bis ganz unten bringen...

[nemelio]

...Hallo, ich habe ein kleines Problem, ich versuche seit einer Weile bei 2 Div`s es hinzubekommen das sie bis ganz nach unten gehen auf dem Bildschirm.

Der dafür nötige Befehl sollte ja margin-bottom: 0; lauten oder ?

Ich benutze derzeit einen Div welcher wiederum 2 Divs (Navigation und Contentbereich) auf der Seite horizontal zentriert.

Dieser "Zentrierdiv" sieht wie folgt aus:

#site {
 width: 819px;
 border: none;
 margin: 0px auto;
 }

Die Navigation sieht dann so aus:

#navbox {
 width: 170px;
 padding: 30px 0 0 0;
 margin: 5px 5px 0 0;
 border-top: 1px solid #e4e4e4;
 border-left: 1px solid #e4e4e4;
 border-right: 1px solid #e4e4e4;
 float: left;
 background-color: #ffffff;
 background-image: url(gfx/head_bg.gif);
 background-position: top;
 background-repeat: repeat-x;
 }

und der Contentbereich wäre dann das hier:

#content {
 width: 610px;
 padding: 30px 15px 0 15px;
 margin: 5px 0 0 0;
 float: left;
 border-top: 1px solid #e4e4e4;
 border-left: 1px solid #e4e4e4;
 border-right: 1px solid #e4e4e4;
 background-color: #ffffff;
 background-image: url(gfx/head_bg.gif);
 background-position: top;
 background-repeat: repeat-x;
 }

Wenn ich bei dem #site Div etwas ändere wird das ignoriert, vermutlich wegen dem "auto", wenn ich das aber entferne ist meine seite nicht mehr zentriert.

Ich möchte das die Border left und Border right des Navigationsbereiches und des Contentbereiches bis nach ganz unten gehen, das man das Ende nicht sehen kann.

Wäre nett wenn mir jemand schreiben könnte was ich falsch mache.

 

[threadi]

...Hallo, ich habe ein kleines Problem, ich versuche seit einer Weile bei 2 Div`s es hinzubekommen das sie bis ganz nach unten gehen auf dem Bildschirm.

Der dafür nötige Befehl sollte ja margin-bottom: 0; lauten oder ?

Nein. margin ist der Außenabstand, hat folglich nichts mit dem zu tun was du willst.

Für deinen Wunsch musst Du alle divs die diese Höhe einnehmen sollen inkl. aller im DOM zwischen ihnen und dem body-Tag liegenden HTML-Elemente auf "height: 100%" setzen.

 

[nemelio]

Ich habe das hier ganz oben in meiner CSS stehen:

html {
 width: 100%;
 height: 100%;
 }

Sollte das ich nicht Standardmässig dafür sorgen das alles 100% ist sofern es nicht anders eingegeben wird?

 

[_Thor_]

Nein, denn du hast als Selektor ja nur html angegeben, der Universalselektor ist *

 

[threadi]

Nein, du musst auch für body, #site und #content "height" auf 100% setzen. Wie gesagt: alle Elemente im DOM bis hin zu denen die diese Höhe einnehmen sollen müssen diese Eigenschaft haben.

 

[FoXMorayn]

es sollte auch auf padding-top und padding-bottom geachtet werden.

 

[prm]

Wenn du die Navi und den content auf 100% setzt, dann kommen nach dem CSS-Box-Modell noch die Höhe des Headers und evtl. Margins und paddings dazu. Folglich wird die Seite zwangsläufig länger als 100%.

Du könntest es mal nach diesem Beispiel versuchen:
Layout mit 100 % Höhe bei fixiertem Header und Footer
Damit dann die gewünschten Ränder bis nach unten gehen, solltest du eine entsprechende, sich vertikal kachelnde Hintergrundgrafik verwenden (welche diese Ränder und Abstände darstellt) und diese per Faux Columns dem #innenwrapper zuweisen.