Footer überlappt Content

[chr1zzLy]

Servus,

ich bin hier wirklich kurz vorm verzweifeln. Es geht um den Footer, der natürlich immer am unteren Bildschirmrand bleiben soll (sowohl bei wenig, als auch viel Content). Das tut er bei weniger Content auch, sobald der Content allerdings mehr wird, überlappt der Footer den Content einfach.

Ich habe schon etliches ausprobiert und auch schon zu dem Thema gegooglet. Vielleicht ist es auch nur ein kleiner Fehler, den ich einfach net finde.

Hier ist mein aktuellster Lösungsansatz:
HTML Content Bereich

<div class="wrapper">
       <div class="content">
              <div class="full-width">
                     Hier steht sehr viel Content, der vom Footer überlappt wird.
              </div>
       </div>
</div>

Die CSS dazu

* {
    box-sizing: border-box;
}

body {
    height: 100%;
}

.content {
  	flex: 1 0 auto;
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15.5em;
    background-color: black;
    color: white;
    font-family: 'Maven Pro', sans-serif;
    font-size: 13px;
    text-align: center;
}

Der Footer ist mit dem <footer></footer> Tag includet.

Habe euch da nur mal das nötigste aus der CSS rausgeholt. Falls ihr noch mehr braucht, einfach Bescheid geben.
Habe es nun mal mit dem Flexbox-Prinzip versucht, womit ich mich noch net ganz so toll auskenne, aber in der Verzweiflung habe ich schon recht viel ausprobiert.
Hab's auch schon mit der festen Größe vom Footer und 'padding-bottom' im Wrapper versucht - ohne Erfolg.

Bin über jeden neuen Lösungsansatz dankbar & hoffe, dass das bald funktioniert. So schwer kann's ja net sein. Wahrscheinlich bin ich einfach zu blind/blöd, um den Fehler zu finden.

[False]

Originally Posted by chr1zzLy

Servus,

ich bin hier wirklich kurz vorm verzweifeln. Es geht um den Footer, der natürlich immer am unteren Bildschirmrand bleiben soll (sowohl bei wenig, als auch viel Content). Das tut er bei weniger Content auch, sobald der Content allerdings mehr wird, überlappt der Footer den Content einfach.

Ich habe schon etliches ausprobiert und auch schon zu dem Thema gegooglet. Vielleicht ist es auch nur ein kleiner Fehler, den ich einfach net finde.

Hier ist mein aktuellster Lösungsansatz:
HTML Content Bereich

<div class="wrapper">
       <div class="content">
              <div class="full-width">
                     Hier steht sehr viel Content, der vom Footer überlappt wird.
              </div>
       </div>
</div>

Die CSS dazu

* {
    box-sizing: border-box;
}

body {
    height: 100%;
}

.content {
  	flex: 1 0 auto;
}

.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column; 
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15.5em;
    background-color: black;
    color: white;
    font-family: 'Maven Pro', sans-serif;
    font-size: 13px;
    text-align: center;
}

Der Footer ist mit dem <footer></footer> Tag includet.

Habe euch da nur mal das nötigste aus der CSS rausgeholt. Falls ihr noch mehr braucht, einfach Bescheid geben.
Habe es nun mal mit dem Flexbox-Prinzip versucht, womit ich mich noch net ganz so toll auskenne, aber in der Verzweiflung habe ich schon recht viel ausprobiert.
Hab's auch schon mit der festen Größe vom Footer und 'padding-bottom' im Wrapper versucht - ohne Erfolg.

Bin über jeden neuen Lösungsansatz dankbar & hoffe, dass das bald funktioniert. So schwer kann's ja net sein. Wahrscheinlich bin ich einfach zu blind/blöd, um den Fehler zu finden.

Wie willst du den Footer den haben ? Soll er immer ganz unten sein oder soll der Footer fixiert sein ?
Wenn der Footer fixiert sein soll kannst du einfach dem Wrapper div einfach ein padding-bottom geben.
Beispiel:

[chr1zzLy]

Originally Posted by False

Wie willst du den Footer den haben ? Soll er immer ganz unten sein oder soll der Footer fixiert sein ?
Wenn der Footer fixiert sein soll kannst du einfach dem Wrapper div einfach ein padding-bottom geben.
Beispiel:

Der Footer soll immer ganz unten sein.

[False]

Originally Posted by chr1zzLy

Der Footer soll immer ganz unten sein.

Da nie was mit CSS am Hut habe kann ich nur das gröbste und kann es dir nicht erklären.
Habe aber ein gutes Beispiel gefunden:

[chr1zzLy]

Originally Posted by False

Da nie was mit CSS am Hut habe kann ich nur das gröbste und kann es dir nicht erklären.
Habe aber ein gutes Beispiel gefunden:

Klappt leider auch net, auch wenn ich alles 10x rumprobiere... ^^ Trotzdem danke. Ich poste euch jetzt mal meine komplette CSS-File, da meine Verzweiflung sich so langsam wirklich auf höchstem Level bewegt.

 CSS-Code

/*-------------
1. Allgemeines
-------------*/
* {
    box-sizing: border-box;
}

body {
	height: 100%;
}

h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
}

h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
}

h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}

.hr-small {
    width: 25%;
}

.hr-big {
    width: 80%;
}

/*-------------
2. Navigation
-------------*/
.navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: 'Oswald', sans-serif;
}

.navigation ul {
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style-type: none;
    background-color: #333;
    text-align: center;
}

.navigation li {
    display: inline-block;
    text-transform: uppercase;
}

.navigation li a {
    padding: 14px 16px;
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
}

.navigation li a:hover:not(.active) {
    color: #009292;
    text-decoration: none;
}

.navigation li .active {
    color: #009292;
    text-decoration: none;
}

/*-------------
3. Content
-------------*/
.content p {
    font-family: 'Maven Pro', sans-serif;
    font-size: 14px;
}

.content {
		
}

.wrapper {
	
}

/*-------------
4. Cols
-------------*/
.col-left {
    position: absolute;
    float: left;
    margin-top: 5%;
    width: 25%;
    text-align: center;
}

.col-mid {
    position: absolute;
    left: 38.3%;
    margin-top: 5%;
    width: 25%;
    text-align: center;
}

.col-right {
    float: right;
    margin-top: 5%;
    width: 25%;
    text-align: center;
}

/*-------------
5. Elemente
-------------*/

/*-------------
6. Footer
-------------*/
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15.5em;
    background-color: black;
    color: white;
    font-family: 'Maven Pro', sans-serif;
    font-size: 13px;
    text-align: center;
}

.footer a {
    color: #009292;
    text-decoration: none;
}

.footer a:hover {
    color: white;
    text-decoration: none;
}

.footer table {
    width: 100%;
}

.footer table td {
    width: 20%;
}

/*-------------
7. Ergänzungen/Sonstiges
-------------*/
.full-width {
    position: absolute;
    top: 5%;
	width: 100%;
}

.full-width h1 {
    text-align: center;
}

.full-width .hr-small {
    text-align: center;
    width: 7%;
}

.standard-width {
	position: absolute;
	float: center;
	top: 5%;
	left: 30%;
	width: 40%;
}

.standard-width h1 {
	text-align: center;
}

.standard width .hr-small {
	text-align: center;
	width: 7%;
}

.small-headline {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
}

Das HTML-Konstrukt sieht in etwa so aus:

<div class="wrapper">
       <div class="content">
              <div class="full-width">
                     Hier steht sehr viel Content, der vom Footer überlappt wird.
              </div>
       </div>
</div>

<footer class="footer">
      Mein Footertext
</footer>

[type.]

Die Lösung ist eigentlich recht simpel, wenn man weiß, auf was man achten muss. Ich hatte, als ich das erste mal damit konfrontiert war auch ziemliche Probleme einen Weg zu finden, den Footer so zu positionieren, wie ich das will.

body {
  
  position: relative;

  margin: 0; padding: 0 0 16em 0;
  min-height: 100vh;

}


.footer {

  position: absolute;
  bottom: 0; left: 0; right: 0;

  height: 15.5em;

}

position: relative; sorgt dafür, dass dein Footer im Document-Flow richtig eingeordnet wird. min-height: 100vh; (statt height: 100%;) sogt dafür, dass dein Body immer mindestens 100% des Viewports hoch ist. Die Einheit VH steht hierbei für ViewportHeight – Prozentangaben funktionieren hier nicht.
Das Padding am unteren Rand sollte mindestens der Höhe deines Footers entsprechen, damit kein Content dahinter verschwinden kann.

Am CSS für den Footer musst du eigentlich nichts weiter ändern.
Zum Anschauen hier noch mal ein funktionierendes Fiddle:

[chr1zzLy]

Originally Posted by type.

Die Lösung ist eigentlich recht simpel, wenn man weiß, auf was man achten muss. Ich hatte, als ich das erste mal damit konfrontiert war auch ziemliche Probleme einen Weg zu finden, den Footer so zu positionieren, wie ich das will.

body {
  
  position: relative;

  margin: 0; padding: 0 0 16em 0;
  min-height: 100vh;

}


.footer {

  position: absolute;
  bottom: 0; left: 0; right: 0;

  height: 15.5em;

}

position: relative; sorgt dafür, dass dein Footer im Document-Flow richtig eingeordnet wird. min-height: 100vh; (statt height: 100%;) sogt dafür, dass dein Body immer mindestens 100% des Viewports hoch ist. Die Einheit VH steht hierbei für ViewportHeight – Prozentangaben funktionieren hier nicht.
Das Padding am unteren Rand sollte mindestens der Höhe deines Footers entsprechen, damit kein Content dahinter verschwinden kann.

Am CSS für den Footer musst du eigentlich nichts weiter ändern.
Zum Anschauen hier noch mal ein funktionierendes Fiddle:

Danke dir. Hab's nun hinbekommen, was ein Krampf. ^^ Ist zwar noch net die perfekte Lösung, aber immerhin ist der Footer jetzt mal da, wo er hin soll. ^^

[JustinMind]

Du kannst auch die neuere Variante "Flexbox" nutzen:


Flexbox wird mittlerweile von sehr vielen Browser(-versionen) unterstützt.
Siehe:

[type.]

Originally Posted by chr1zzLy

Danke dir. Hab's nun hinbekommen, was ein Krampf. ^^ Ist zwar noch net die perfekte Lösung, aber immerhin ist der Footer jetzt mal da, wo er hin soll. ^^

Naja, es ist zumindest eine saubere Lösung mittels CSS.
Das blöde daran ist eben, dass dein Footer eine Höhe gesetzt haben muss. Dem kannst du aber ganz eifnach Abhilfe schaffen, in dem du dir den Lösungvorschlag mit Flexbox anschaust:

Originally Posted by JustinMind

Du kannst auch die neuere Variante "Flexbox" nutzen

Hier übernimmt der Browser quasi alle Berechnungen und du kannst dich ganz auf den Rest des Layouts konzentrieren, ohne immer über den blöden Footer nachdenken zu müssen. c:

Demofiddle gibts auch:

[chr1zzLy]

Originally Posted by type.

Naja, es ist zumindest eine saubere Lösung mittels CSS.

Das blöde daran ist eben, dass dein Footer eine Höhe gesetzt haben muss. Dem kannst du aber ganz eifnach Abhilfe schaffen, in dem du dir den Lösungvorschlag mit Flexbox anschaust:





Hier übernimmt der Browser quasi alle Berechnungen und du kannst dich ganz auf den Rest des Layouts konzentrieren, ohne immer über den blöden Footer nachdenken zu müssen. c:



Demofiddle gibts auch:

Stimmt. Jetzt passt der Footer erst mal und ich kann mich endlich auf das richtige Layout konzentrieren. Mit Flexbox mach ich den dann in der finalen Version.

Nervt mich schon, dass ich jetzt so viele Stunden an dem blöden Ding gehangen habe, obwohl es doch so einfach war. Na ja... Danke an alle für die hilfreichen Antworten!