der lästige Footer

[EuroCent]

Hallo und guten Abend,

aktuell habe Ich folgendes anliegen.
Ich verwende auf meiner Webseite BS4.

Und wenn Ich den Footer einbinde:

<footer class="footer">
    <div class="container">
        <p class="text-muted"><i class="far fa-copyright" title="Copyright"></i> 2018 @Sitename <span class="badge badge-success" title="Version 2">v2</span> | <i class="fas fa-newspaper" title="Version"></i> : <a href="./index.php?site=changelog">0.1.3 Final</a></p>
    </div>
</footer>

Dann wird zwar der Footer auf anderen Seiten, jenachdem wie Viel inhalt angezeigt wird.
Am Bottom angehangen.

Wenn Ich jedoch nur eine Jumbotron einbinde, sitzt der Footer direkt unter dem Jumbotron statt am Bottom.

CSS:

.footer {
    display: block;
    height: 60px !important;
    background-color: #e60000 !important;
    bottom: 0 !important;
}

Sobald Ich aber:

.footer {
    display: block;
    height: 60px !important;
    background-color: #e60000 !important;
    bottom: 0 !important;
    position: absolute;
}

Verwende, dann ist er zwar am Fussbereich fixiert, aber bei anderen Seiten, wo mehr Inhalt existiert, dan ist der Footer über dem Container.

Mir ist bewusst dass das ein lästiges Thema ist.
Aber Ich habe schon verschiedene Varianten aus probiert und komme aber zu keinem Vernünftigen Ergebnis.

Vielleicht kann mir einer erklären woran es liegt.
Und hat eine Lösung parat.

 

[Nico2201]

Hallo EuroCent,

ich bin zwar kein CSS-Profi, aber so wie ich das verstanden habe, scheint

clear: both;

sehr nützlich zu sein, da diese Eigenschaft das Umfließen von Floats an den betroffenen Elementen verhindern soll. Dadurch wird ein Freiraum auf einem Element erstellt, sodass andere Elemente nicht auf dem Element, das die Eigenschaft

clear: both;

besitzt, liegen können. Das ganze habe ich so realisiert:

.footer {
    display: block;
    height: 60px;    !important
    background-color: #e60000;    !important
    bottom: 0px;    !important
    position: absolute;
    width:100%;
    clear:both;    !important
    border-top: 2px solid #000000;    /*vom Aussehen her sieht die schwarze Linie auf dem roten Footer besser aus ;)*/
}

Und bei deinem Programmcode würde ich

!important

weglassen, da es bei mir zu Problemen geführt hat, warum auch immer.

Ich hoffe, dass ich dir damit weiterhelfen konnte.

P.S.: Wie schon erwähnt, ich bin kein CSS-Profi! Von daher garantiere ich nicht, dass meine potenziell richtige Lösung auch wirklich richtig ist.

Freundliche Grüße

 

[basti1012]

Es wird auch immer gerne Flexbox empfohlen oder wer das nicht will kann auch eine mindest höhe angeben.Wenn dein Content eine Mindesthöhe von 100 vh Minus footer höhe hat ,dann muß der Footer ja unten stehen und bei gröseren Inhalt ist er ja dann sowiseo unten. Aber Flexbox finde ich schöner

 

[Sempervivum]

Aber Flexbox finde ich schöner

"Finde ich schöner" ist kein Argument. Der Nachteil bei absoluter Positionierung ist, wie Eurocent auch geschrieben hat, dass der Footer den Content überlagert. Das muss man dann mit einem Margin ausbügeln, aber das hat wieder den Nachteil, dass sich dieses nicht an die Höhe des Footers anpasst. Beide Nachteile vermeidet man, wenn man Flexlayout verwendet.

 

[EuroCent]

Naja verwende Bootstrap v4 und weiß aktuell nicht wie Ich das da um setzen kann

Habe mit Flexbox oder Flexlayout bisher noch nichts zutun gehabt, da das was Ich brauchte bisher gereicht hatte

Wenn Ich das Beidpiel aus BS nehmen was den Sticky oder fixed Footer anschaue und nutze, dann überlagern sich die Container :/

Theoretisch benötige Ich nur eine Lösung für den Footer, ansonsten müsste Ich alles mit JS machen.

Auslesen wie lang der InnerContent ist und dann den Footer ab Punkt x einblenden.

Allerdings möchte Ich das vermeiden

 

[Sempervivum]

Nein, Javascript ist nicht nötig. Hier ist unter "There is Flexbox" angegeben, wie es geht:
https://css-tricks.com/couple-takes-sticky-footer/