Willkommen auf dem Portal für Mediengestalter

Dacrania · Threadersteller

Hallo!

Ich habe schon etliche Stunden in den tiefsten Tiefen von Google nach einer passenden Lösung für mein Layout gesucht, aber leider nichts passendes gefunden. Auch hier im Forum finde ich leider nichts.

Ich bräuchte eine Lösung wie man es hinkriegt, dass, wenn der Content kleiner ist als das Browserfenster, der untere Bereich mit dem Footer aufgefüllt wird (oder zumindest in der selben Farbe, wie der Footer aufgefüllt wird).

Im Internet habe ich zwei Lösungen (einer mit height 100% und der andere mit einer div box über die ganze seite) gefunden, die mit meinem Layout nicht funktionieren, und noch einen dritten Ansatz mittels Bootstrap. Bevor ich mich jetzt in Bootstrap reintiger, wollte ich hier nochmal nachfragen, ob jemand eine Idee mittels CSS hat? Lächel

Vereinfachtes HTML:

<html>
<body>
<div class="headerwrapper">
<p>header</p>
</div> 
<div class="contentwrapper">
<p>content</p>
</div> 
<div class="footerwrapper">
<p>footer</p>
</div> 
</body>
</html>

CSS:

body,html {
height: 100%}

.headerwrapper {
width: 100%;
padding: 25px 0 0 0;
margin: 0 auto 0 auto;
background-color: #dbe9ec; /* dbddec*/
box-shadow: 0px 2px 3px rgba(5,5,5,0.3);
/*background-image: url(../grafiken/berserker.png);*/
}

body {
padding: 0;
margin: 0 auto 0 auto;
background-color: #fefefe;
font-family: "Open Sans", Verdana, sans-serif;
}

.contentwrapper {
margin: 0 auto 60px auto;
width: 960px;
padding-top: 10px;
}

.footerwrapper {
width: 100%;
padding: 0;
margin: 20px auto 0 auto;
background-color: #dbe9ec; /* dbddec*/
box-shadow: 0px -2px 3px rgba(5,5,5,0.3);
}

Vielen lieben Dank für eure Hilfe! Lächel

Newone. · **Verfasst** Mi 01.04.2015 18:14 **Titel**

http://codepen.io/anon/pen/OPGmgW

Dacrania · Threadersteller

Vielen lieben Dank Newone.!

Es ist zwar nicht das was ich gemeint habe, aber das passt auch gut zu meinem Layout. * Applaus, Applaus *

Nach zweitägigen Absuchen der googleweiten Untiefen, werde ich meine Suche aufgeben und deine Idee einbinden.

Lg und Danke

Martys · **Verfasst** Do 02.04.2015 10:51 **Titel**

Wie soll denn dein Layout aussehen? Ohne dies zu wissen kann man dir auch nicht wirklich helfen.

ExMD · **Verfasst** Do 02.04.2015 11:25 **Titel**

google mal nach "sticky footer".

dass du dazu bisher "in den tiefsten tiefen von google nichts gefunden hast, kann ich nicht glauben, denn das fällt unter typische anfänger-probleme und das netz ist voll von entsprechenden forenanfragen und workarounds.

Dacrania · Threadersteller

Hey!

Also ich bin in dem Gebiet auch Anfängerin (ist meine erste Webseite, die ich in html umsetze), wahrscheinlich kann ich mich deswegen auch noch nicht so präzise ausdrücken.

Ja Lächel

Zu sticky footer und sticky footer ALT habe ich viele Anleitungen gefunden, aber das ist - glaube ich - nicht das was ich suche. Da klebt der footer dann immer am unteren Browserrand so wie ich das verstanden habe.

Ich werde nochmal das Layout erklären:

Ich habe einen Header samt horizontaler Navigation.
Dann kommt der Content, der je nach Seite vom Inhalt her mal länger und mal kürzer ist. Manchmal ragt er über das Browserfenster hinaus und manchmal nicht.
Zum Schluss natürlich der Footer.

Ich möchte dass der Footer folgendes macht:
Ist der Content länger als das Browserfenster hoch ist, ist auch der Footer nicht zu sehen. Erst wenn man ans Ende der Seite scrollt steht er ganz am Ende unten.
Ist der Content kürzer als das Browserfenster (und jetzt kommt das was ich nicht hinkrieg) "klebt" der Footer an der Content-Div-box, streckt sich aber bis ganz nach unten zum Ende des Browserfensters. Oder zumindest nur die Farbe des Footers. Der Inhalt des Footers kann meinetwegen auch ganz oben im Footer stehn, um den gehts mir nicht.

Kleine schnelle grafische Darstellung:

Ein paar im Netz haben auch nach dem, was ich suche, gesucht, aber nie eine Antwort bekommen, bzw. Antworten wie "ich wüsste nur wies mit javascript geht" bekommen, aber weiter wird nie drauf eingegangen. Aber vielleicht hat ja hier einer eine Idee Lächel

Vielen lieben Dank für eure Geduld und Hilfe!

Kartöffelchen · **Verfasst** Fr 03.04.2015 10:30 **Titel**

Morgo · **Verfasst** Fr 03.04.2015 14:29 **Titel**

Du denkst zu kompliziert:

Willkommen auf dem Portal für Mediengestalter

Thema: Footer soll Höhe auffüllen wenn Content kleiner als Fenster vom 01.04.2015

Footer soll Höhe auffüllen wenn Content kleiner als Fenster