Warum befindet sich meine Fußzeile in der Mitte meiner Webseite?

Eine Website-Fußzeile wird möglicherweise aus verschiedenen Gründen in der Mitte der Webseite und nicht unten angezeigt. Eine der häufigsten ist, dass der Inhalt der Website klein ist und die Fußzeile in die Mitte gedrückt wird. Die Container mit der Fußzeile "" sind möglicherweise falsch codiert, die Ränder oder Polsterungen sind möglicherweise falsch und die Eigenschaft "float" könnte falsch sein.

Fußzeilenposition

Die Fußzeilen-CSS-Eigenschaft "position" bestimmt, wo sich die Fußzeile auf der Webseite in Relation zu den anderen Seitenelementen befindet, z. B. der Kopfzeile und dem Haupttextinhalt. Die fünf Positionierungsarten sind statische Position, feste Position, relative Position, überlappende Position und absolute Position. Die absolute Positionierung in der Fußzeile wird verwendet, damit sich das Fußzeilenelement nicht im Verhältnis zu den anderen Elementen verhält. Fügen Sie die "Position: absolut" hinzu. Codierung innerhalb der "#footer" -Klammer "{" und "}". Fügen Sie zusätzlich "bottom: 0;" hinzu. in der Zeile direkt unter der Codierung "position". Jetzt befindet sich die Fußzeile absolut am unteren Rand des Webseiten-Containers "DIV".

Fußzeile Breite und Höhe

Die Eigenschaften für die Breite und Höhe der Fußzeile können die Positionierung der Fußzeile beeinträchtigen. Wenn die Fußzeile zu groß ist, nimmt sie am unteren Rand der Webseite zu viel Platz ein. In der Klammer "#footer" sind die Tags von "{" und "}" mit "width: Xpx;" und "height: Xpx;" Codierung. Ändern Sie die Breite in "100%", um die Fußzeile so breit wie der restliche Inhalt der Website zu machen. Ändern Sie die Höhe auf die gewünschte Pixelgröße, z. B. "60px" oder "75px". Diese beiden Änderungen können dazu beitragen, dass die Fußzeile am Ende der Webseite nach unten verschoben wird.

Ränder und Padding

Die Rand- und Polstercodierung kann die Position der Fußzeile beeinträchtigen. Wenn die Fußzeilenränder zu schmal sind oder die Polsterung zu breit ist, wird die Fußzeilenposition verschoben und kann in die Mitte der Webseite verschoben werden. Eine einfache Lösung besteht darin, die Ränder und die Polsterung vollständig zu entfernen, sodass diese Fußzeilen-Eigenschaften der restlichen Codierung entsprechen. Suchen Sie die Eigenschaft "#footer" in der Webseitencodierung. Innerhalb der Klammer-Tags von "{" und "}" befindet sich der "Rand: Xpx Xpx Xpx Xpx;" und "Auffüllen: Xpx Xpx Xpx Xpx;" Codierung. Jetzt werden die Fußzeilenränder und die Auffüllung durch die Tags "#body" und "#container" oben auf der Webseite bestimmt. Entfernen Sie beide Codierungszeilen, und aktualisieren Sie die Webseite.

Das Container-Layout

Ein Webseitenfuß ist ein Element, das innerhalb des gesamten DIV-Containerlayouts positioniert ist. Wenn die Container-Layout-Eigenschaften nicht korrekt sind, kann dies die Position der Fußzeile auf der Webseite beeinflussen. In der Klammer "#container" haben Tags von "{" und "}" die gleichen Eigenschaften für "height" und "position". Ändern Sie die "Höhe" in 100% und ändern Sie die "Position" in relativ. Fügen Sie dem "#container" eine neue Codierungszeile hinzu, und geben Sie "min-height: 100%;" ein. Dadurch erhält das gesamte Containerlayout eine neue Mindesthöhe. Jetzt bleibt die gesamte Webseite unabhängig von der Menge des Inhalts die volle Höhe des Bildschirms. Die relative Position wirkt sich auch positiv auf die absolute Position der Fußzeile aus.

Beliebte Beiträge