• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Auffüllen bis unteren Browserrand

I

[inSane]

Neues Mitglied
Hallo Forengemeinde!

Gleich bei meinem ersten Forenbeitrag hab ich ein CSS-Problem.(Denkfehler?) :)
Unter diesem Link könnt ihr meine Seite einsehen.

So nun zu meinem Problem:

Das letzte DIV (#areaFOOTER) soll den Browser nur bis zum unteren Rand mit dem Rot auffüllen.
Blöderweise ist das DIV höher als es sein soll und in unbefüllten Zustand der Seite kann man schon ewig weit runterscrollen. Wenn die Seite später mit Inhalt befüllt wird, sollte das DIV mit dem wachsenden Inhalt´s DIV nach unten wandern und dann die Seite möglichst mit gleichem Abstand zum unteren Browserrand schließen, wie im unbeschriebenen Zustand.

Wo habe ich da meinen (Denk)-Fehler reingebaut?
Ich hoffe, dass ich das Ganze verständlich erklärt habe. :)

Nun folgen noch die wichtigsten Code Auszüge :
index.html:
HTML-Code:
[ HTML]
<body> <div id="areaBANNER"></div> <div id="areaNAVI"> <a href="#" class="navigation" >Home</a> <a href="#" class="navigation" >Finanzen </a> <a href="#" class="navigation" >Versicherungen </a> <a href="#" class="navigation" >Kontakt </a> <a href="#" class="navigation" >Anfahrt </a> <a href="#" class="navigation" >Partner </a> </div> <div id="areaCONTENT"> <div id="areaLEFTCONTENT"> <h1>Überschrift </h1> <hr></hr> Inhalte </div> <div id="areaRIGHTCONTENT"> <h1>Überschrift </h1> <hr></hr> Inhalte </div> <div class="clear"></div> </div> <div id="areaFOOTER"></div></body>
[/HTML]
main.css:
Code:
Code: 
[/COLOR][COLOR=#122549][FONT=Verdana]
*,html        {                margin:auto;                padding:auto;                width:100%;                height:100%;                                }            body            {                            background-color:#595556;                    background-image:url(../img/background.jpg);                    background-repeat:repeat-x;                    height:100%;                    width:100%;                                                        }            #areaBANNER        {                        position:relative;                    z-index:3;                    margin:auto;                    padding:auto;                    width:1000px;                    height:170px;                    background-image:url(../img/banner.jpg)                                                        }#areaCONTENT    {                        position:relative;                    top:-10px;                    z-index:1;                    margin:auto;                    padding:auto;                    padding-bottom:30px;                    width:1000px;                    height:auto;                    min-height:400px;                    background-color:#FFF;                                        -moz-box-shadow: 0 0 30px rgba(0,0,0, 0.4);                    -webkit-box-shadow: 0 0 30px rgba(0,0,0, 0.45);                    box-shadow: 0 0 30px rgba(0,0,0, 0.4);                                    }#areaFOOTER        {                        position:relative;                    top:-60px;                                        margin:auto;                    padding:auto;                    width:100%;                    height:100%;                    min-height:100px;                                        background-color:#b22c20;                                }
[/FONT][/COLOR][COLOR=#333333][/ CODE][/COLOR]
[COLOR=#122549][FONT=Verdana]Danke schon mal im voraus! [/FONT][/COLOR]

[COLOR=#122549][FONT=Verdana]Grüße [/FONT][/COLOR]

[COLOR=#122549][FONT=Verdana]inSane[/FONT][/COLOR]
 
Zuletzt bearbeitet:
Hi inSane, willkommen bei HTML.de!

Vorweg: Es gibt im Editor Tags, die dazu führen, das Code formatiert angezeigt wird. Das macht es leichter, ihn zu interpretieren. Die Heißen [ CODE]...[/ CODE] und [ HTML]...[/ HTML] (jeweils ohne Leerzeichen) und es gibt noch mehr.
Zu deiner Frage. der rote Bereich soll bis nach unten? Dann schmeiß die relative Positionierung raus und änder das margin wie folgt:
Code: 
margin: -60px auto 0 auto;
Viel Erfolg!
B.
 
Hi,

Danke für die schnelle Antwort! Hat leider nix gebracht!
Der rote Bereich soll bis ganz unten, genau! Momentan ist er leider viel zu groß!

Code: 
#areaFOOTER		{
	
				
					margin: -60px auto 0 auto;
					padding:auto;
					width:100%;
					height:100%;
					background-color:#b22c20;


				
				}
 
Hi inSane,
Hat leider nix gebracht!
Zum Vergrößern anklicken....
nunja – immerhin geht er jetzt bis ganz unten, oder?

Schmeiß da mal zusätzlich die Höhe von 100% raus. Die macht dein rotes Div so hoch, in diesem Fall so hoch wie deinen Body. Lass die Höhe undefiniert oder vergib eine (sinnvolle) Mindesthöhe (min-height:...px)

Grüße!
B.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben