Footer überlappt Content

Quote:

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 HTML Code: <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 Code: * { 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. :p

Quote:

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: [Only registered and activated users can see links. Click Here To Register...]

Quote:

Originally Posted by chr1zzLy Der Footer soll immer ganz unten sein.

Quote:

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: [Only registered and activated users can see links. Click Here To Register...]

/*-------------
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;
}

<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>

Quote:

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. Code: 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: [Only registered and activated users can see links. Click Here To Register...]

Quote:

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. ^^

Quote:

Originally Posted by JustinMind Du kannst auch die neuere Variante "Flexbox" nutzen

Quote:

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: [Only registered and activated users can see links. Click Here To Register...]