Autor |
Nachricht |
Dacrania
Threadersteller
Dabei seit: 28.07.2014
Ort: Österreich
Alter: -
Geschlecht:
|
Verfasst Mi 01.04.2015 02:53
Titel Footer soll Höhe auffüllen wenn Content kleiner als Fenster |
|
|
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?
Vereinfachtes HTML:
<html>
<body>
<div class="headerwrapper">
<p>header</p>
</div> <!--headerwrapper-->
<div class="contentwrapper">
<p>content</p>
</div> <!--contentwrapper-->
<div class="footerwrapper">
<p>footer</p>
</div> <!--footerwrapper-->
</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!
|
|
|
|
|
Newone.
Dabei seit: 11.03.2014
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
Anzeige
|
|
|
Dacrania
Threadersteller
Dabei seit: 28.07.2014
Ort: Österreich
Alter: -
Geschlecht:
|
Verfasst Do 02.04.2015 00:38
Titel
|
|
|
Vielen lieben Dank Newone.!
Es ist zwar nicht das was ich gemeint habe, aber das passt auch gut zu meinem Layout.
Nach zweitägigen Absuchen der googleweiten Untiefen, werde ich meine Suche aufgeben und deine Idee einbinden.
Lg und Danke
|
|
|
|
|
Martys
Dabei seit: 07.04.2005
Ort: Bochum
Alter: 45
Geschlecht:
|
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
Dabei seit: 27.01.2005
Ort: Saarland
Alter: 45
Geschlecht:
|
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
Dabei seit: 28.07.2014
Ort: Österreich
Alter: -
Geschlecht:
|
Verfasst Fr 03.04.2015 05:23
Titel
|
|
|
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 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
Vielen lieben Dank für eure Geduld und Hilfe!
|
|
|
|
|
Kartöffelchen
Dabei seit: 16.03.2012
Ort: Strawberry Fields
Alter: -
Geschlecht:
|
Verfasst Fr 03.04.2015 10:30
Titel
|
|
|
Code: | .footerwrapper{
height:100%;
} |
|
|
|
|
|
Morgo
Dabei seit: 10.08.2005
Ort: Von Kowelenz bis Kölle
Alter: 39
Geschlecht:
|
Verfasst Fr 03.04.2015 14:29
Titel
|
|
|
Du denkst zu kompliziert:
Code: |
html {
background-color: #dbe9ec;
}
|
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] Layout(Header, Sidenav, Content, Footer) mit 100% Höhe
Variabler Header/Footer in Höhe - fester Content - WIE?
[CSS] Content Div überlagert Footer
Lücke zwischen Content und Footer im ff
Problem, bekomme Footer nicht auf 100% Höhe
Footer mitwachsend zum Content bereich. CSS Code.
|
|