Kann nicht CSS Sticky Footer zu arbeiten. Was mache ich falsch?

StackOverflow https://stackoverflow.com/questions/159487

  •  03-07-2019
  •  | 
  •  

Frage

Nun, dies ist mein erster Beitrag hier und wirklich die Website zu genießen.

Ich habe eine sehr einfach (hässlich wie die Sünde) Seite, die ich begonnen haben, und aus irgendeinem Grund, kann ich nicht die CSS Sticky Footer arbeiten für FireFox bekommen. IE funktioniert, aber FF zeigt es die Seite auf halber Höhe.

Die URL ist http://dev.aipoker.co.uk

Ich weiß, sollte ich in FF und Bugfixing in IE entwickeln, so könnte ich vermute, ich tatsächlich einen Fehler gemacht haben und irgendwie funktioniert es in IE, aber nirgendwo sonst.

Kann mir jemand aus meinem Elend helfen setzen Sie sich bitte?

Danke, Jungs und Mädels.

War es hilfreich?

Lösung

Versuchen Sie, diese ein , es funktioniert gut auf Firefox.

BTW, sollten Sie auf Boagworld Podcast hören, wenn Sie nicht bereits tun. Es ist brilliant! :)

Prost.

Andere Tipps

Ich habe Erfolg mit Code wie folgt: 

footer { 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0px; 
}

Die minimalen Veränderungen, die ich sehen kann, dies zu tun wäre:

  • move footerSection innerhalb des Körpers
  • eingestellte Position absolute sowohl auf Körper und footerSection
  • gesetzt unten = 0px auf footerSection

, die endet mit so etwas in Ihrem Kopf: 

<style type="text/css">
  #body, #footerSection { position: absolute; }
  #footerSection { bottom: 0px; }
</style>

<div id="body">
   ...
   <div id="footerSection">
      ...
   </div>
</div>

Dies ist alles, was Sie wissen müssen, über CSS nur klebrig Fußzeilen & klebrig navs:

Halten Sie sich an unten auf der Seite 

Position: absolute;
top:auto;
bottom: 0;

Halten Sie sich an unteren Teil des Bildschirms 

Position: fixed;
top:auto;
bottom:0;

Alle Probleme, und es ist wahrscheinlich, wo Sie Ihre HTML-Code platziert (nicht die Fußzeile ein untergeordnetes Element machen, wenn es auf den Inhalt Wrapper ist kleben) oder überlappende CSS.

Sie können durch Umlegen des Autos & oben die gleiche Technik zu klebrigem Navigation anwenden. It'sis Cross-Browser-kompatibel (Aus dem Gedächtnis von IE7 und höher) einschließlich Handy.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top