Dlaczego moja stopka znajduje się na środku mojej strony internetowej?

Stopka witryny może pojawić się na środku strony internetowej, a nie na dole z wielu powodów. Jednym z najczęstszych jest to, że zawartość strony jest niewielka, a stopka jest przesunięta w górę. Kontenery ze stopką mogą być niepoprawnie kodowane, marginesy lub dopełnienie mogą być nieprawidłowe, a własność "zmienna" może być niepoprawna.

Pozycja stopki

Właściwość "pozycja" CSS stopki określa miejsce umieszczenia stopki na stronie WWW w stosunku do innych elementów strony, takich jak nagłówek i zawartość głównej treści. Pięć rodzajów pozycjonowania to pozycja statyczna, pozycja stała, pozycja względna, pozycja nakładania i pozycja bezwzględna. Stosuje się bezwzględne pozycjonowanie w stopce, aby element stopki nie zachowywał się względem innych elementów. Dodaj "position: absolute;" kodowanie wewnątrz znaczników "#footer" "{" i "}". Dodatkowo dodaj "bottom: 0;" w linii bezpośrednio pod kodem "pozycji". Teraz stopka jest umieszczona absolutnie na dole kontenera "DIV".

Szerokość i wysokość stopki

Właściwości szerokości i wysokości stopki mogą zakłócać pozycjonowanie stopki. Jeśli stopka jest zbyt duża, zajmuje zbyt dużo miejsca u dołu strony internetowej. W nawiasach "#footer" w nawiasach "{" i "}" znajduje się "szerokość: Xpx;" i "wysokość: Xpx;" kodowanie. Zmień szerokość na "100%", aby stopka była tak szeroka jak reszta treści witryny. Zmień wysokość na pożądany rozmiar piksela, na przykład "60 pikseli" lub "75 pikseli". Te dwie zmiany mogą przyczynić się do przesunięcia stopki na dół strony internetowej.

Marginesy i dopełnienie

Kodowanie marginesów i wypełnień może kolidować z pozycją stopki. Gdy marginesy stopki są zbyt wąskie lub marginesy są zbyt szerokie, pozycja stopki przesuwa się i może przejść na środek strony internetowej. Jednym prostym rozwiązaniem jest całkowite usunięcie marginesów i wypełnień, tak aby właściwości stopki odpowiadały pozostałej części kodu. Znajdź właściwość "#footer" w kodowaniu strony internetowej. W nawiasach znaczniki "{" i "}" to "margines: Xpx Xpx Xpx Xpx;" i "dopełnienie: Xpx Xpx Xpx Xpx;" kodowanie. Teraz marginesy i dopełnienie stopki są określane przez znaczniki "#body" i "#container" u góry strony internetowej. Usuń obie linie kodu i odśwież stronę internetową.

Układ kontenera

Stopka witryny to jeden element, który jest umieszczony w ogólnym układzie kontenerów DIV. Gdy właściwości układu kontenera są niepoprawne, może to wpłynąć na pozycję stopki na stronie sieci Web. Wewnątrz znaczników wspornika "#container" "{" i "}" mają te same właściwości "wysokość" i "położenie". Zmień "wysokość" na 100% i zmień "pozycję" na względną. Dodaj nową linię kodowania do "#container" i wpisz "min-height: 100%;", co daje całemu układowi kontenerów nową minimalną wysokość. Teraz cała strona internetowa pozostanie na pełnej wysokości ekranu niezależnie od ilości treści. Względna pozycja również oddziałuje pozytywnie z bezwzględną pozycją stopki.