Footer ist nicht immer ganz unten

  • Moin moin aus dem hohen Norden!


    An einem Monitor in meiner gemütlichen Höhle ist der Footer nicht ganz unten im Desktop. Es handelt sich um einen Monitor mit der Auflösung 1920px x 1200px.


    html-seminar.de/woltlab/attachment/1058/


    ...siehe die roten Pfeile.


    Ich komme nicht dahinter, woran das liegt und erbitte Eure Hilfe.


    Meine Homepage ist im "Responded Design" konzipiert.





    Danke Euch Allen!

  • Mit dem Code und ohne Grafiken sieht es so aus wie im ersten Bild (bei 1024 x 768 ).
    Wenn man im CSS bei footer hinzufügt

    CSS
    position:absolute;
    width:100%;


    sieht es aus wie im zweiten Bild; das funktioniert auch, wenn die Ansicht rein- oder rausgezoomt wird.

  • Danke für Deine Antwort Jay!


    ...aber leider ist das Problem damit nicht gelöst.


    Es betrifft auch nur Seiten, die mit ihrer gesamten Ausdehnung über die Vertikale in die Höhe des Monitors passen. Die Scrollleiste erscheint hier natürlich nicht am Monitorrand.


    Ist der Inhalt der Seiten über die vertikale Ausdehnung größer, erscheint brav die Scrollleiste am rechten Rand > scrollt man jetzt die Seite nach oben weg bis der Footer erscheint, so bleibt dieser jetzt brav ganz unten stehen.

  • Hallo


    Du suchst in der Suchmaschine deiner Wahl nach "sticky footer".


    Das ist ein Oberbegriff, für den es verschiedene Lösungen gibt. Du musst dir dann die heraussuchen mit der du am besten zurecht kommst.


    Ich selbst bevorzuge eine Lösung mit Flexbox.


    Bei den Lösungen ohne Flexbox muss die Höhe des footers grundsätzlich fest angegeben werden. Dann muss durch geeignete Breakpoints dafür gesorgt werden dass die Höhe immer passt. Außerdem widerspricht das der Regel, dass die Höhe von Elementen durch ihren Inhalt bestimmt werden soll.


    Bei den Lösungen mit Flexbox zickt der IE11 etwas rum, das ist für mich bei Lösungen mit dem Sticky Footer aber das geringste Problem. Die Besucher mit dem IE11 werden keineswegs abgeschreckt und viele werden nicht mal mitbekommen, dass die Seite in anderen Browsern etwas anders aussieht, da dies bei Responsive Layout in verschiedenen Fensterbreiten der Normalfall ist. Zudem ist der IE11 auf dem absteigenden Ast und hat nur noch eine relativ geringe Verbreitung.


    Gruss


    MrMurphy

  • Für das Scrollen habe ich auch keine Lösung parat. Sticky Footer ist bestimmt die beste Möglichkeit.


    Um mir die HTML/Body-Sache mal anzusehen, habe ich einfach Farben vergeben. Den Content innerhalb eines DIVs mit position:relative zu positionieren bringt zwar den Footer unter den Text, doch die Lücke zum Bildschirmrand bleibt.

  • Danke für Eure Antworten!


    Ich schau mir das mit dem "Sticky Footer" an ...hoffe nur, die Zusammenhänge zu verstehen :D


    Ich bin mir nicht ganz sicher, ob ich mich richtig mitgeteilt habe: Mein "Footer" muss NICHT fest fixiert unten am Rand sein, also nicht ständig sichtbar sein. Die ganze Seite (inkl. Footer) darf scrollbar sein.


    Jav: Danke für Deine Mühe, meine Problem-Fragen "nachzubauen"!!! Macht man ja nicht mal eben so! Dafür ein :thumbup:


    -----


    Besteht denn generell die Möglichkeit , das Menu oben und den Footer unten im responded Design fest zu setzen. So dass nur der Kontex dazwischen scrollt?


    www.lpk.rocks


    Denn wenn man das Problem damit lösen kann, dass der Footer fest und immer sichtbar unten sitzt, dann müsste auch das Menu oben fest und immer sichtbar sein. Sonst sieht es - für mein Empfinden - nicht gut aus.


    Was muss ich in meinem CSS Style ändern?


    -----


    MrMurphy: Darf ich vorstellen...


    html-seminar.de/woltlab/attachment/1062/


    Miss Murphy! Die heimliche Obrigkeit in unserem Hause ;)

  • Moin nochmals Alle zusammen!


    Ich weiß nun nicht, ob es eine Lösung im Sinne einer "Sticky Footer" Ausführung ist, aber ich habe bei meiner Suche unter diesem Begriff so einiges gesehen und gefunden.


    Ich habe für den Footer nun folgendes gemacht: Eine div-Box erstellt...



    ...und im html-Style den gesamten Footer in diese div-Box gepackt.


    Jetzt ist die Footer-Leiste ständig sichtbar und (!!!) nun auch ganz unten bei meinem größeren Display bei mir zu Hause.


    Mein Menü habe ich mit fixed auch "festsetzen können. Der Bereich dazwischen scrollt wie es sich gehört und mit dem responded Design funktioniert auch alles wie es soll. Das das Menu jetzt ständig sichtbar ist, finde ich auch wesentlich besser und komfortabeler für Besucher meiner Page!


    Danke Euch Allen nochmals!!!

  • Moin Jav!


    Also wenn "position:fixed" unter #nav mit aufgeführt wird, kann man "body>#nav" kpl. weglassen. Habe ich soeben getestet.


    Das mit "body>#nav" habe ich auf irgend einer Seite im Netz gefunden, als ich Tips gesucht habe zum Thema "CSS Feststehendes Menu responded Designe". Ich lasse es jetzt weg und löse es so:


    CSS
    #nav {
      z-index:1;
      position:fixed;
      width:100%;
      height:auto;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!