DIV-Element am Ende des Bildschirm anzeigen.

Question

Hallo allerseits,

hätte wieder mal eine Frage.
Ich möchte ein DIV-Element am unteren Rand des Bildschirmes anzeigen, nicht am Seitenende weil dies kann ausserhalb des Sichtbaren Bereich sein.
Hier mal der Code welchen ich verwende.

@media screen { body>div#footLNK{; bottom:0px; }}
div#footLNK { 
background-color:#231f20; 
margin:0; 
padding:0; 
z-index:9; 
bottom:0px; 
left:0px; 
width:100%; 
height:20px; 
vertical-align:middle; }

Das ganze wird zwar unten am Bildschirmrand angezeigt aber bei manchen Browser und vorallem auf Smartphones wird das statt unten in der Mitte der Seite angezeigt.
Habe ich vielleicht auf etwas vergessen???
Wie kann man das so definieren das auch beim Scrollen der Footer immer an der gleichen position, bei allen Endgeräten bleibt.

Mit besten Dank im vorhinein und

Lg

WaZZkeSS

Answer 1

Hi,

ob das nun alle möglichen Browser, insbesondere auf Smartphones und Co. wirklich korrekt interpretieren, weiß ich nicht. Ich würde das aber dann so machen:

div#footLNK {
    bottom: 0;
    position: absolute;
}

Je nachdem, was genau Du haben willst, wäre auch "fixed" anstelle von "absolute" bei position besser.

Edit: Blöder Editor. Hat alle position Angaben entfernt.

---

Gruß, Stefan
Microsoft MVP - Visual Developer ASP/ASP.NET
http://www.asp-solutions.de/ - Consulting, Development
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

Answer 2

Hallo Stefan,

danke vorerst für deine Antwort. Leider wurde auch bei meinem Beitrag etwas abgeschnitten welcher mir erst auffiel als ich deine Antwort las.
Und zwar die erste CSS Eigenschaft, die position property verwende ich bereits.

div#footLNK {
;
background-color:#231f20;
margin:0;
padding:0;
z-index:9;
bottom:0px;
left:0px;
width:100%;
height:20px;
vertical-align:middle; }

Lg
WaZZkeSS

Answer 3

Wird anscheinend schon wieder abgeschnitten?

Für dieses Verhalten verwendest du normalerweise position fixed

jedoch funktioniert dies bei Tablets/Smartphones nicht (Ausnahmen bestätigen die Regel).

Deswegen musst du bei position absolute bleiben, wenn du alle Devices unterstützen willst. Dadurch bewegt sich das Element allerdings nicht mit, sobald du scrollst. 

Deswegen musst du die Position immer mit Javascript neu berechnen, sobald gescrollt wird.

Wenn du jetzt dein Element also unten orientieren willst, dann brauchst du (im Beispiel mit jQuery) folgendes:

var element = $('#deinElement');
// die Höhe deines Elements
var elementHeight = element.height();
// gibt die aktuelle Scrollposition des Bildschirms an
var scrollTop = 0;
// gibt die Höhe des aktuellen Viewports an
var bodyHeight = $('body').height();


$(window).scroll(function(e) {
  scrollTop = $(document).scrollTop();

  element.css({
    top: scrollTop + bodyHeight - elementHeight
  });
});

Hier bindest du an das scroll-Event, welches immer gefeuert wird, sobald du scrollst.

Dann wird die aktuelle scroll Position neu berechnet und die Höhe des Viewports dazu, dann bist du an deinem aktuellen sichtbaren Fuß. Wenn du da jetzt das Element positionieren würdest, würdest du es gerade nicht mehr sehen, weil es dort anfängt.

Also entweder -elementHeight oder im CSS margin-top: -XXpx.

Der Effekt simuliert jetzt das position fixed .

Ist nicht perfekt, und weit nicht so flüssig, weil das Event, je nach Browser und Device immer unterschiedlich oft gefeuert wird.

Bei Smartphones soweit ich weiß nur alle 500ms.

Am besten baust du für das Element noch eine CSS3 Transition für top ein, damit das flüssiger rüberkommt.

Und als Erweiterung könntest du auch noch schauen, dass du mitberechnest, wenn das Fenster resized wird.

Generell kannst du auch mit einem Interval verwenden, dass viel kürzer ist, als die Zeit, nach der das scroll Event gefeuert wird, was das ganze nochmals flüssiger machen sollte.

Hoffe, ich konnte dir helfen!

Ciao Tobi

Answer 4

Hallo  Twentythree!

Danke für deine Antwort und für den JS Code.
Nach so einer Lösung hatte ich gesucht.


Lg
WaZZkeSS