Footerproblem: Footer überschneider sich mit #content

Hallo!

Ich habe ein Problem au meiner Website wp.weyrauch.ch. Ich möchte, dass der Footer IMMER gleich uinterhalb des Bildschrimrandes beginnt, dass mann also um den Footer zu sehen immer ganz runter scrollen muss. Dies habe ich schlussendlich auch geschafft mit folgendem Code:

html,
body.page-id-1208,
body.page-id-1208 .site,
body.page-id-1120,
body.page-id-1120 .site,
body.page-id-17,
body.page-id-17 .site,
body.page-id-949,
body.page-id-949 .site {
position: relative;
height: 100%;
width: 100%;
}

body.page-id-1208 #content,
body.page-id-1120 #content,
body.page-id-17 #content,
body.page-id-949 #content {
width: 100%;
height: 100%;
}

Wie ihr seht habe ich keine globale Lösung gefunden, also musste ich es für jede Seite einzeln festlegen, dass der content eben 100% Höhe einnimmt usw. Dies hat aber bis anhin auch gut so funktioniert bis mir aufgefallen ist, dass wenn die Seite von einem Computer mit niedriger Auflösung (zB. 1360 x 768) betrachtet wird, sich der #content und der Footer überschneiden (gut sichtbar unter folgendem Link: wp.weyrauch.ch/contact). Ich hab mittlerweile schon wieder über 4 Stunden rumprobiert und bin leider zu keinem guten Ergebnis gekommen. Ich bin über jede Hilfe sehr dankbar!

Alles Liebe!
Simon

Danke für deine Antwort SirEctor.

Ich habe das mal so umgesetzt:
html,
.site {
position: relative;
min-height: 100%;
width: 100%;
}

#content {
width: 100%;
min-height: 100%;
}

Doch leider funktioniert das Platzieren des Footers nicht. Der Footer kommt unterhalb vom Content. Der Footer soll sich aber 1. am Content orientieren, falls der Content grösser ist als 100% des Anzeigebildschirms und 2. am Anzeigebildschirm orientieren (also immer mindestens 1px unterhalb des letzten Pixels des Anzeigebildschirms angezeigt werden).

--> Also wie folgt:
-Wenn Content grösser als 100% des Bildschirms --> --> Footerposition orientiert sich an Content (positioniert sich unterhalb des Contents)
-Wenn Content kleiner als 100% des Bildschirms --> --> Footerposition orientiert sich an Anzeigebildschirm (positioniert Footer 1px unterhalb des letzten angezeigten Pixels des Bildschirms)

Gibt es eine Möglichkeit, dies so hinzubekommen? Am nächsten dran war ich bisher definitiv mit meiner "Flick-Lösung" (Footerposition für jede Seite manuell definieren).

Mauhahaha SirEctor! Endlich hats geklappt!!! DANKE!! Es sieht jetzt echt alles so aus wie ich es wollte. Perfekt! Danke dir!!

Du bist echt eine Limited Edition! :)

Alles Liebe!
Simon

Lieber SirEctor

Leider musste ich feststellen, dass sich ein paar neue Probleme ergeben haben durch die gemachten Änderungen.
1. Der "go-top"-Button ist verschwunden, welcher normalerweise durch JQuery ausgelöst wird bei ungefähr y=110 (betrifft alle Browser).
2. Die Autoscroll-Funktion der Schuh-Kategorien ist nur noch im Firefox und im IE aktiv. Im Chrome zeigt es die Links zwar noch an, doch es passiert nichts wenn man klickt. (Beispiel: http://wp.weyrauch.ch/our-shoes/lace-up/ --> die links gleich unterhalb des Titels)

Ich habe jedoch keine Idee woran das liegt :/ bzw. welche Änderung dafür verantwortlich ist. Ich habe nur deinen Rat befolgt und meinen Code entsprechend abgeändert, doch seit dann sind diese beiden neuen Probleme aufgetaucht.

.. As I said.. Godlike.. you are..

Danke!!!!