Rendi un piè di pagina HTML rimanere in fondo alla pagina con un'altezza minima, ma non sovrapporre la pagina in CSS

Rendi un piè di pagina HTML rimanere in fondo alla pagina con un'altezza minima, ma non sovrapporre la pagina in CSS
HTML consente agli sviluppatori Web di aggiungere vari componenti per la creazione di una pagina Web. Normalmente, le pagine Web sono classificate in tre parti: intestazione, corpo e piè di pagina. IL ""L'elemento di solito contiene contenuti introduttivi,""È l'ultima sezione della pagina Web che contiene i dettagli del sito Web o i dettagli dell'utente e""Mantiene il contenuto principale della pagina Web.

Questo articolo esaminerà:

  • Come fare un piè di pagina?
  • Come far rimanere il piè di pagina HTML nella parte inferiore della pagina?

Come fare un piè di pagina?

Per creare un piè di pagina, gli utenti possono utilizzare un semplice ""Elemento o un""Tag.

Per una migliore concezione, passare attraverso la procedura fornita.

Passaggio 1: inserire l'intestazione

Innanzitutto, inserire un'intestazione utilizzando qualsiasi etichetta di intestazione da "

" A "
". Ad esempio, abbiamo usato il "

"Tag per aggiungere un livello di livello uno.

Passaggio 2: crea un contenitore "div"

Successivamente, crea un contenitore "div" con l'aiuto di ""Tag. Inoltre, aggiungi un attributo "classe" e assegnagli il nome "contenuto principale".

Passaggio 3: crea un altro contenitore "div"

Ora, fai il prossimo "div"Container e specificare"corpo" come il "id"Valore dell'attributo.

Passaggio 4: crea tabella

Utilizzare il "

"Tag per creare una tabella nel secondo contenitore. Quindi, aggiungi i seguenti elementi tra il "
"Tag:

  • "
"Elemento utilizzato per definire le righe nella tabella.
  • "
  • "Viene utilizzato per aggiungere l'intestazione del tavolo.
  • "
  • "Definisce una cella di dati all'interno della tabella per inserire i dati.

    Passaggio 5: crea piè di pagina

    Successivamente, crea un piè di pagina inserendo un altro "div"Container e assegnarlo una classe"piè di pagina":

    Pagina Footer Soggiorno in fondo










    Materie di informatica
    Sistema operativo
    Dbms
    Reti di computer
    Gestione del progetto


    piè di pagina

    In alternativa, l'utente può utilizzare HTML ""Elemento da aggiungere footer nella pagina HTML:

    piè di pagina

    Produzione

    Come fare in modo che il piè di pagina HTML rimanga in fondo alla pagina?

    Per rendere il piè di pagina della pagina HTML che rimane in fondo alla pagina, prova le istruzioni di seguito.

    Passaggio 1: stile del primo contenitore "div"

    Accedi al principale "div"Container utilizzando la classe".contenuto principale"E applicare le proprietà sotto l'elenco di CSS:

    .contenuto principale
    Posizione: relativo;
    Min-Height: 80%;
    Background-color: bisque;
    Testo-align: centro;

    Qui:

    • "posizione"Proprietà che l'elemento è posizionato rispetto alla sua posizione normale.
    • "Min-height"Viene utilizzato per definire l'altezza minima dell'elemento.
    • "colore di sfondo"Specifica un colore particolare sul retro dell'elemento.
    • "allineamento"La proprietà viene utilizzata per l'impostazione dell'allineamento del testo.

    Produzione

    Passaggio 2: Stile Secondo contenitore "div"

    Ora accedi al secondo elemento "div" usando il "id"Attributo"#corpo". Quindi, applica le seguenti proprietà CSS:

    #corpo
    imbottitura: 30px;
    imbottitura-bottom: 60px;
    Margine: 10px 80px;

    Di seguito è riportata la descrizione del codice sopra:

    • "imbottitura"È utilizzato per allocare lo spazio attorno al contenuto dell'elemento.
    • "imbottitura"Viene utilizzato per aggiungere lo spazio inferiore all'interno dell'elemento.
    • "margine"Specifica lo spazio al di fuori dell'elemento.

    Produzione

    Passaggio 3: footer di stile

    Se hai utilizzato il ""Tag, quindi è possibile accedere utilizzando il nome del tag. In questo scenario, abbiamo avuto accesso al "div"Container con la classe".piè di pagina":

    .Footer
    Posizione: assoluto;
    In basso: 0;
    imbottitura: 10px;
    Testo-align: centro;
    larghezza: 100%;
    Altezza: 80px;
    Background: RGB (134, 240, 139);

    Dopo aver acceduto al contenitore "Div", applica le seguenti proprietà CSS:

    • Qui, "posizione"La proprietà viene utilizzata per impostare la posizione di un elemento. Il piè di pagina verrà impostato sul fondo della pagina impostando il valore come "assoluto".
    • IL "metter il fondo a"Viene utilizzato per impostare la posizione verticale di un elemento posizionato. Questa proprietà non influisce sugli elementi non posizionati.
    • "imbottitura"Viene utilizzato per aggiungere spazio all'interno dell'elemento solo nella parte superiore.
    • "larghezza"Definisce la larghezza di un elemento.
    • "altezza"Definisce l'altezza di un elemento.
    • "sfondo"Viene utilizzato per impostare il colore di sfondo dell'elemento.

    Si può notare che il piè di pagina della pagina è impostato nella parte inferiore della pagina:

    Hai imparato a fare in modo che il piè di pagina di pagina rimanesse nella parte inferiore della pagina con l'altezza minima.

    Conclusione

    Per far rimanere il piè di pagina HTML nella parte inferiore della pagina con l'altezza minima, crea prima il piè di pagina usando "Tag o ""Elemento in HTML. Quindi, accedi al piè di pagina in CSS per nome del tag o classe assegnata o ID. Quindi, applica il "Posizione: assoluto"Proprietà per far rimanere il piè di pagina in fondo alla pagina. Questo post ha spiegato il metodo per far rimanere il piè di pagina HTML nella parte inferiore della pagina.