Sticky Footer

Veröffentlicht in html / css / less | 25.11.2019

html {

position: relative;

min-height: 100%;

}

#footer: {

position: absolute;

bottom: 0;

left: 0;

height: ...;

width: 100%;

}

--> garantiert, dass bei sehr kurzen Seiten Footer unten bleibt

body: {

margin-bottom: Höhe footer + margin + padding;

}

--> hilft, dass der Footer bei langen Seiten die Inhalte nicht überlagert

Mit position: static; kann die absolute Positionierung des Footers im responsive dann wieder aufgehoben werden