Isotope mit Bootstrap 3 und Sticky Footer

Ich verwende Isotope, um ein Raster von Bildern innerhalb eines Bootstrap 3-Frameworks darzustellen. Ich habe eine klebrige Fußzeile (mit empfohlener absoluter Positionierung, wobei die untere Einstellung auf 0 gesetzt ist).Isotope mit Bootstrap 3 und Sticky Footer

Wenn das Browserfenster in der Höhe verkleinert wird, stoppt das div mit den Isotop-d-Bildern nicht dort, wo der sticky footer beginnt - also die untersten 60px des div (der tatsächliche Betrag hängt von der Höhe für die Fußzeile ab) wird durch die Fußzeile ODER unter der Fußzeile verborgen. Der Unterschied wird bestimmt, ob ich eine Höhe für die Container-Divs festlege.

Hier ist der HTML-Code aus https://codepen.io/marklsanders/pen/KrRVaK:

the codepen contains an example

ich das Problem zu erraten durch die Tatsache verursacht wird, dass alle positioniert Bilder von Isotopen sind absolut positioniert. Irgendwelche Vorschläge, wie man damit richtig arbeitet?

dank

Quelle

2016-07-23 Mark Sanders

Versuchen Sie, Ihre Fußzeile position: absolute;-position: fixed; ändern, und fügen Sie padding-bottom: 75px; zu Ihrem <body>.

Bedenken Sie, dass wenn Sie absolute oder feste Position festlegen, dieses Element aus dem regulären Dokumentfluss entfernt wird. Wenn Sie es positionieren, wird höchstwahrscheinlich ein Konflikt mit einem anderen statisch positionierten Element auftreten.

In diesem Fall simuliert das Hinzufügen von Padding zum Body im regulären Dokument den tatsächlich von der Fußzeile belegten Platz.

Zusätzlicher Hinweis: Der Ansatz "Sticky Footer" bedeutet im Allgemeinen, dass Sie eine feste Höhe für Ihre Fußzeile festlegen müssen. Ich habe 75px für die Polsterung des Körpers verwendet, aber Sie können damit für die besten Ergebnisse fiedeln.

Quelle

2016-07-23 15:42:47 Toby

Vielen Dank. Perfekt. ich vergesse manchmal die Grundlagen :) –

Isotope mit Bootstrap 3 und Sticky Footer

Antwort

Verwandte Themen