CSS Sticky Footer-Implementierungscode

Dieser Artikel stellt den Implementierungscode für CSS Sticky Footer vor und teilt ihn mit Ihnen. Die Details sind wie folgt:

Der in der Abbildung oben gezeigte Effekt ist der Sticky Footer. Wenn der Seiteninhalt nicht lang genug ist, wird der Footer am unteren Rand des Fensters positioniert. Wenn der Seiteninhalt das Fenster überschreitet, wird der Footer am unteren Rand der Seite angezeigt.

Hier sind mehrere Implementierungslösungen:

1. FlexBox-Layout

Die HTML-Struktur ist wie folgt:

<Text>

    <div class="header">Klebrige Fußzeile</div>

    <div Klasse="Inhalt">

        <p>Testen Sie, testen ...

        <p>Testen Sie, testen ...

        <p>Testen Sie, testen ...

        <p>Testen Sie, testen ...

        <p>Testen Sie, testen ...

        <p>Testen Sie, testen ...

    </div>

    <div Klasse="Fußzeile">

        <p>Dies ist die Fußzeile</p>

    </div>

</body>

Das wichtigste CSS ist wie folgt:

Körper{

    Anzeige: Flex;

    Flex-Flow: Spalte;

    Mindesthöhe: 100vh;

}

.Inhalt{

    biegen: 1;

}

FlexBox ist so einfach zu implementieren, der Effekt wird auch veröffentlicht

Die Wirkung der Karte scheint nicht besonders gut zu sein, aber die Wirkung ist erreicht! ! ! !

2. Klassische Routine: padding-bottom + margin-top

Die HTML-Struktur ist wie folgt:

<Text>

    <div Klasse="Wrapper Clearfix">

        <div class="title">Sticky-Footer</div>

        <div Klasse="Inhalt">

            <p>Testen Sie, testen ...

            <p>Testen Sie, testen ...

            <p>Testen Sie, testen ...

        </div>

    </div>

    <div Klasse="Fußzeile">

        <p>Dies ist die Fußzeile</p>

    </div>

</body>

Das wichtigste CSS ist wie folgt:

.Verpackung{

    Mindesthöhe: 100vh;

}

.Inhalt{

    Polsterung unten: 50px;

}

.Fußzeile{

    Höhe: 50px;

    Rand oben: -50px;

}

Implementierungseffekt (ich habe das Gefühl, ich muss eine Bildschirmaufzeichnungssoftware installieren):

Beachten Sie bei der Verwendung dieser Lösung Folgendes:

1. Die Mindesthöhe des Wrappers muss der Fensterhöhe entsprechen

2. Die absoluten Werte der drei Eigenschaftswerte „Füllung unten“ des Inhalts, „Rand oben“ und „Höhe“ des Fußbereichs müssen konsistent sein (da „Rand oben“ ein negativer Wert ist, handelt es sich also um einen absoluten Wert). Der Grund für die Beibehaltung der Konsistenz besteht darin, den Sticky Footer besser implementieren zu können. Obwohl der Sticky Footer-Effekt erreicht werden kann, wenn die Höhe relativ gering ist, entsteht unten eine Lücke.

3. Diese Lösung ist mit allen gängigen Browsern gut kompatibel. Emmmmm, nicht schlecht

4. Wenn der Hauptteil ein schwebendes Layout verwendet, müssen Sie ein Kompatibilitätsproblem berücksichtigen. Der Schwerpunkt liegt hier auf Google Chrome.

Die vierte oben erwähnte Kompatibilitätslösung:

Fügen Sie den berühmten Clearfix-Hack zu .wrapper hinzu:

.clearfix{

    Anzeige: Inline-Block

}

.clearfix:nach{

    Anzeige: Block

    Inhalt: "."

    Höhe: 0

    Zeilenhöhe: 0

    klar: beides

    Sichtbarkeit: versteckt

}

3. Lösung mit fester Höhe

Die HTML-Struktur ist wie folgt:

<Text>

    <div Klasse="Wrapper">

        <div class="header">Klebrige Fußzeile</div>

        <div Klasse="Inhalt">

            <p>Testen Sie, testen ...

            <p>Testen Sie, testen ...

            <p>Testen Sie, testen ...

            <p>Testen Sie, testen ...

            <p>Testen Sie, testen ...

        </div>

    </div>

    <div Klasse="Fußzeile">

        <p>Dies ist die Fußzeile</p>

    </div>

</body>

Die wichtigsten CSS-Stile sind wie folgt:

.Verpackung{

    Mindesthöhe: berechnet (100vh – 50px);

    Box-Größe: Rahmenbox;

}

Hinweis: Die Höhe der Fußzeile beträgt 50px. Vor und nach dem Operator calc() muss ein Leerzeichen gelassen werden.

Ich werde die Ergebnisse nicht veröffentlichen, Sie können einfach Ihrer Fantasie freien Lauf lassen, sie sind so ziemlich dieselben wie oben. . .

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.