Antworten auf deine Fragen:
Neues Thema erstellen

Div-Container Automatisch bis Bildschirm Unterkante verlängern

Daniel_Knecht

Daniel_Knecht

PSD-Mitglied

Hallo,
ich bin fast am verzweifeln. Wie kann ich den footer (div) wie auf dem Bild zu sehen ist bis zur Unterkante vom Bildschirm (Seite) Automatisch verlängern lassen?



Uploaded with

ich habe in meiner css (sind nur Ausschnitte):
HTML: 
body, html {
	/*background: #f5f5f5;*/
	background: url(../images/background.jpg) repeat;
	min-height: 100%;
	height: 100%;
}

#site {
	width: 1000px;
	margin: 0 auto;
}
&
HTML: 
#footer {
	background: #3e3b3b url(../images/footer_background.jpg) repeat-x;
	min-height: 90px;
	margin-top: 10px;
	clear: both;
}

aber der div verlängert sich einfach nich bis ganz runter. Wenn ich bei min-height 100% eintrage is der ganze footer komplett so groß wie der ganze Bildschirm was ja nun aber auch nicht sein soll.
 

Daniel_Knecht

Daniel_Knecht

PSD-Mitglied

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Du hast mich da vllt. falsch verstanden.
Der footer soll ja nicht sticky am bottom sein sondern der footer soll immer direkt unter dem Inhalt der Seite sein NUR eben das der footer sich (falls wie dort) der Inhalt zu klein ist sich Automatisch verlängert in der Höhe bis runter an die kante der Seite.
 
owieortho

owieortho

Aktives Mitglied

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Daniel_Knecht schrieb:
Du hast mich da vllt. falsch verstanden.
Der footer soll ja nicht sticky am bottom sein sondern der footer soll immer direkt unter dem Inhalt der Seite sein NUR eben das der footer sich (falls wie dort) der Inhalt zu klein ist sich Automatisch verlängert in der Höhe bis runter an die kante der Seite.
Zum Vergrößern anklicken....
Ja, und genau das nennt sich sticky footer. Guck mal hier, da ist auch gleich ein Link auf der Seite, der ds Verhalten bei nicht Bildschirm füllendem Inhalt zeigt.
 
sokie

sokie

Mod | Web

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

wenn ich das richtig verstanden habe, soll die hintergrundfarbe des footers erhalten bleiben, selbst wenn die Summe der Inhalte kürzer ist als die Seitenhöhe im Browserfenster.
In diesem Fall wäre eine Lösung die, dass die ganze Seite (body,html) die Hintergrundfarbe (-bild) des Footers erhält, und die übrigen Inhalte in einem Container mit der normalen Hintergrundfarbe gesetzt werden.
 
tr4ze

tr4ze

Mod | Forum

Teammitglied
PSD Beta Team
AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Hmm kann ja auch nicht funktionieren, welche höhe hat den div#site ?.;)

Probier mal:
Code: 
body {
    min-height: 100%;
}
#site {
        min-height: 100%;   
    width: 1000px;
    margin: 0 auto;
}


#footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 50px;
    background: #666;
    width: 100%;
}
 
K

krid2873

Noch nicht viel geschrieben

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Moin,

Daniel_Knecht:
Du hast mich da vllt. falsch verstanden.
Zum Vergrößern anklicken....
Glaube ich auch, trotzdem würde ich die Sticky Footer Methode mal als Alternative im Hinterkopf behalten.

Daniel_Knecht:
Der footer soll ja nicht sticky am bottom sein sondern der footer soll immer direkt unter dem Inhalt der Seite sein NUR eben das der footer sich (falls wie dort) der Inhalt zu klein ist sich Automatisch verlängert in der Höhe bis runter an die kante der Seite.
Zum Vergrößern anklicken....
Das bedeutet aber, das bei hohen Auflösungen und wenig Inhalt der Footer mehr als die Hälfte des Browserfenster beansprucht*. Ich finde das sieht nicht wirklich schön aus.
*So geschehen bei mir (1920x1080) als ich mir z.B. dein Impressum anschaut habe.
 
ans316

ans316

Nicht mehr ganz neu hier

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

hallo,

was ist mit #footer {height:100%;}

das schon mal probiert?
 
Daniel_Knecht

Daniel_Knecht

PSD-Mitglied

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

krid2873 schrieb:
Moin,

...

Das bedeutet aber, das bei hohen Auflösungen und wenig Inhalt der Footer mehr als die Hälfte des Browserfenster beansprucht*. Ich finde das sieht nicht wirklich schön aus.
*So geschehen bei mir (1920x1080) als ich mir z.B. dein Impressum anschaut habe.
Zum Vergrößern anklicken....

Stimmt da hast du recht das hab ich gar nicht mit bedacht.
Ich habe jetzt der body, html mit der footerfarbe versehen und den background für den Inhalt mit dem Hintergrundbild jedoch will das nicht so richtig funktionieren.

Die ganze Page (inkl. dem background des inhaltes) ist jetzt grau wie der footer. Es wird also das Hintergrundbild für dne Inhalt ignoriert doch weiß ich nicht wo der Fehler liegt das er den hg ingnoriert.

Code: 
body, html {
	background: #3e3b3b;
	min-height: 100%;
	height: 100%;
}

#site {
	width: 1000px;
	margin: 0 auto;
}
#page_top {
	background: url(../images/header_background.jpg) repeat-x;
	height: 140px;
}
#page_top_content {
	width: 980px;
	margin: 0 auto;
}
#page_middle {
	background: url(../images/background.jpg) repeat;
	height: auto;
}
#page_middle_content {
	width: 980px;
	margin: 0 auto;
}

tr4ze schrieb:
Hmm kann ja auch nicht funktionieren, welche höhe hat den div#site ?.;)

Probier mal:
Code: 
body {
    min-height: 100%;
}
#site {
        min-height: 100%;   
    width: 1000px;
    margin: 0 auto;
}


#footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 50px;
    background: #666;
    width: 100%;
}
Zum Vergrößern anklicken....

Wenn ich das so mache passt das zwar mit dem footer aber bei längerem Inhalt wiederum ist der footer dann direkt mitten im/über dem Inhalt!
 
Zuletzt bearbeitet:
sokie

sokie

Mod | Web

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

ohne den html quelltext zu sehen, kann man nur raten (und womöglich nur falsch raten) Man muss schon wissen, wie genau das ganze aufgebaut ist.
 
Daniel_Knecht

Daniel_Knecht

PSD-Mitglied

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Stimmt sorry ^^

Naja... ich schreibe gerade alles komplett neu und baue die divs auch anders auf das alles besser zusammen passt. Auch hab ich gesehen da sich css befehle hatte die gar nicht verwendet wurden bzw. doppelt sind.

Doch das Problem mit dem footer bleibt weiterhin bzw. was heißt Problem... Unter dem footer gehts nun in der footerfarbe weiter ABER wie schon geschrieben wurde da der footer direkt unter dem Content ist kann es bei hohen Auflösung zu sehr viel grau (unterhalb des footers) kommen.
 
sokie

sokie

Mod | Web

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Daniel_Knecht schrieb:
Doch das Problem mit dem footer bleibt weiterhin bzw. was heißt Problem... Unter dem footer gehts nun in der footerfarbe weiter ABER wie schon geschrieben wurde da der footer direkt unter dem Content ist kann es bei hohen Auflösung zu sehr viel grau (unterhalb des footers) kommen.
Zum Vergrößern anklicken....

nun verstehe ich gar nichts mehr - im Eingangspost war doch die frage genau die, wie du den Footer bis an den unteren Bildschirmrand verlängern kannst, wenn nur wenig content in der Seite ist...
 
Daniel_Knecht

Daniel_Knecht

PSD-Mitglied

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Ja das Problem habe ich nun gelöst da ich alles noch ein mal neu gescriptet habe nur das der komplette Hintergrund der Seite nun so grau wie der footer.

Der Footer ist immer nur noch 90px hoch aber da nun die Page wie der footer grau ist im hg sieht man nicht mehr das der footer dort aufhört ;)
 
nostra87

nostra87

Nicht mehr ganz neu hier

AW: Div-Container Automatisch bis Bildschirm Unterkante verlängern

Du kannst, im Übrigen, mit position:absolute und position:relative arbeiten.
Eine Mischung aus Beiden kann das Problem beheben, sofern ich dich richtig verstanden habe.
Dein Div Layer box3 passt sich immer dynamisch an. In dem Fall wär das dein Footer

Gruß

HTML: 
<div id="center">
  <div id="boxen">
   <div id="box1"></div>
   <div id="box2">
    Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext Beispieltext 
   </div>
   <div id="box3"></div>
  </div>
 </div>
HTML: 
div         {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float:none}
body       {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float:none}
span       {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float:none}
p            {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; float:none}

#center    {width:1024px;margin:0px auto;height:786px;float:none;}
#boxen     {width:300px;position:absolute; background-color:#CCCCCC;top:100px;}
#box1       {width:300px;height:100px;position:absolute; background-color:black;}
#box2       {width:300px;height:100%;position:relative; background-color:red;top:100px;}
#box3      {width:300px;height:100px;position:relative; background-color:green;top:100px;}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.
Gesamt: 49 (Mitglieder: 0, Gäste: 49)
Robots: 884

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben