Ein echter Sticky Footer mit festem Header?

Bitte lesen Sie zuerst die ganze Frage durch, damit Sie verstehen, wonach ich suche. Danke!

Dies ist eine Frage, die ich seit langer Zeit zu recherchieren versuche und die mich eine Weile lang überrumpelt hat. Kann ich eine echte klebrige Fußzeile mit einer festen Kopfzeile haben?

Wie kann ich eine klebrige Fußzeile mit einer festen Kopfzeile implementieren? Ich kann dem Text oder dem Inhalt keine Polsterung oder einen Rand hinzufügen, da dies die Fußzeile beschädigen würde. Außerdem möchte ich in der Lage sein, zu verwendenwidth:100% undheight: 100% in meinem Inhalt, ohne dass er überläuft und ein Chaos verursacht.

Hier ist, was ich anstrebe (entschuldigen Sie bitte meine großartigen Photoshop-Fähigkeiten):

Das sieht gut aus, wenn ich es benutzeposition:fixed; undbottom:0; in meiner Fußzeile. Aber um es wirklich klebrig zu machen, muss ich meiner Seite ein paar CSS hinzufügen. (von :http://css-tricks.com/snippets/css/sticky-footer/)

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}

Dies ermöglicht es mir, eine sehr gut aussehende, klebrige Fußzeile zu haben, aber hier ist das Problem. Ein Teil des Inhalts befindet sich unter meiner festen Navigationsleiste.

Ich kann dem Körper, HTML ODER dem Inhalt keine Polsterung oder einen Rand hinzufügen, da dies die klebrige Fußzeile durcheinander bringt. Gibt es eine Möglichkeit, dies ohne CSS "Hacks" zu tun?

Dies ist mit dem Inhalt unter der Überschrift:http://jsfiddle.net/g2ydV/3/

Sieht gut aus, aber ein Teil des Inhalts ist unter der Überschrift versteckt? Beheben wir das, indem wir dem Inhalt einen Rand hinzufügen:http://jsfiddle.net/g2ydV/2/

Das obige Beispiel funktioniert, ABER die Fußzeile ist durcheinander. Wie kann ich diesen Effekt erzielen, ohne meine klebrige Fußzeile zu beschädigen?

Antworten auf die Frage(3)

Ihre Antwort auf die Frage