it-swarm.com.de

schwimmende Fußzeile immer unten und sichtbar

Ich habe eine Website wie diese: >> Website << . Es besteht aus 2 Rahmen - Haupt- und Fußzeile. Ich habe versucht, es ohne Frames zum Laufen zu bringen (funktioniert nicht mit Mobiltelefonen). Gibt es eine einfache CSS- oder jQuery-Methode, um die Fußzeile an der Unterseite zu kleben, um immer sichtbar zu sein? also ist der effekt wie auf der website oben? Ich habe versucht, css zu verwenden, aber die Fußzeile wird nur angezeigt, wenn ich nach unten scrolle. Ich möchte, dass die Fußzeile den tatsächlichen Inhalt abdeckt, also ist sie beispielsweise immer 50 Pixel hoch und ist immer am unteren Rand des Bildschirms sichtbar. Auch wenn die Seite 10000px hoch ist. Ich glaube es ist etwas einfaches, aber ich habe mich irgendwo dort verlaufen. Danke im Voraus für Ihre Hilfe

24
Piotr Ciszewski

Ja. Es ist die position: fixed-Eigenschaft.

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

Demo: http://jsfiddle.net/ZsnuZ/

47
Christian Varga
(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
3
Sam Jones

Fortsetzung von Sam Jones:

Grundsätzlich wird geprüft, ob die Höhe des Dokuments das Fenster ausfüllt. Wenn es weniger als das Fenster ist, wird es an den unteren Rand des Fensters angehängt. Ist das Dokument größer als die Fenstergröße, wird es am unteren Rand des Fensters angehängt das Dokument (ist also nur sichtbar, wenn Sie nach unten blättern).

Wenn Sie die Größe des Fensters ändern, wird es neu berechnet und alles sollte ordnungsgemäß funktionieren!

CSS

#footer {
  bottom: 0px;
}

HTML

<div id="footer">
  Footer content
</div>
<script>
  var footerResize = function() {
    $('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
  };
  $(window).resize(footerResize).ready(footerResize);
</script>
1
FuzzyJulz

Wir können sogar die Höhen vergleichen und die Fußzeile mit dem folgenden Code unten setzen.

 $(document).ready(function(){
    if($("body").height() < $(window).innerHeight()) {
                    $('#footer').css('position','fixed');
                    $('#footer').css('bottom',0);
    }
 });
0
brax7