Una tecnica di layout comune, comunemente chiamata piè di pagina appiccicoso, era difficile da eseguire in passato con i CSS precedenti, ma ora è come creare un piè di pagina appiccicoso con i CSS. Un piè di pagina appiccicoso è un piè di pagina che rimane fisso e visibile nella parte inferiore dello schermo, indipendentemente da quanto l’utente scorre la pagina verso il basso. In teoria, la posizione del piè di pagina appiccicoso non dovrebbe mai cambiare e dovrebbe sempre apparire sullo schermo dell’utente.
Creare un piè di pagina appiccicoso utilizzando i CSS è in realtà abbastanza semplice, per lo più basta impostare la proprietà position del piè di pagina su fixed. Dai un’occhiata al codice qui sotto per vedere come è fatto. In questo esempio, l’ID del piè di pagina è #sticky-footer.
Un piè di pagina appiccicoso è il piè di pagina della pagina web, che si attacca alla parte inferiore del viewport quando il contenuto è più corto del viewport altezza. Questo ci consente di navigare facilmente in un sito Web e può essere creato con i CSS.
Crea elementi HTML
con i seguenti nomi di classe:”content”e”push”. Aggiungi un elemento con il nome della classe”footer”.
Aggiungi CSS
Specifica le proprietà di altezza e margine per gli elementi e. Aggiungi le proprietà padding, min-height e margin alle classi”content”. Imposta la proprietà height uguale al margine negativo.
Cos’è un piè di pagina appiccicoso?
Un piè di pagina è l’informazione nella parte inferiore di una pagina web. Su un sito Web tradizionale, i visitatori scorrono verso il basso per visualizzare le informazioni nel piè di pagina nella parte inferiore della pagina Web. Ma con un piè di pagina appiccicoso (chiamato anche piè di pagina fisso), tali informazioni vengono sempre visualizzate nella parte inferiore del browser Web del visitatore, anche se il visitatore scorre verso il basso. Non è necessario andare in fondo alla pagina per vederlo.
Ad esempio, il team del banco prenotazioni ha scoperto che la visualizzazione in primo piano del numero di telefono del centro di contatto sul sito Web aumentava gli ordini, quindi si sono assicurati veniva visualizzato in un piè di pagina appiccicoso per i visitatori mobili.
L’immagine di seguito è tratta dall’articolo”Caso di studio sull’ottimizzazione del tasso di conversione: come un sito di viaggi ha raddoppiato il tasso di conversione del sito web in un anno”, che indica dove i numeri di telefono sono elencati sui siti mobili. Il numero di telefono in fondo alla pagina è elencato nel piè di pagina appiccicoso.
FAQ
Cos’è il CSS del piè di pagina appiccicoso?
Un modello di piè di pagina appiccicoso è uno dove il piè di pagina della tua pagina”si attacca”alla parte inferiore del viewport nei casi in cui il contenuto è più corto dell’altezza del viewport.
Come faccio a fare in modo che il piè di pagina tocchi la parte inferiore della pagina in CSS?
Puoi utilizzare flexbox per assicurarti che il piè di pagina sia sempre in fondo alla pagina. Questo viene fatto impostando l’elemento body min-height: 100vh , display: flex e flex-direction: column.
Piè di pagina appiccicoso è uguale a piè di pagina fisso?
Su un sito Web tradizionale, un visitatore scorre verso il basso per visualizzare le informazioni nella parte inferiore di una pagina Web nel piè di pagina. Tuttavia, con un piè di pagina appiccicoso (a volte noto come piè di pagina fisso) tali informazioni sono sempre presenti nella parte inferiore del browser Web del visitatore mentre il visitatore scorre verso il basso.