{"id":462,"date":"2017-09-25T12:16:14","date_gmt":"2017-09-25T10:16:14","guid":{"rendered":"http:\/\/www.eugigufo.net\/it\/?page_id=462"},"modified":"2024-10-01T13:57:11","modified_gmt":"2024-10-01T11:57:11","slug":"paragrafo1","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo1\/","title":{"rendered":"\u00a7\u00a01. Come fissare il\u00a0footer sempre in\u00a0fondo alla pagina"},"content":{"rendered":"<p>Penso che tenda al\u00a0cento percento la\u00a0quantit\u00e0 dei front-end developer che hanno dovuto affrontare almeno una volta nella vita il\u00a0problema del footer \u00abdisubbidiente\u00bb che non vuole stare in\u00a0fondo alla pagina. Infatti, il\u00a0problema si\u00a0presenta ogni qualvolta che si\u00a0costruisce una pagina con pochi contenuti o\u00a0addirittura vuota. Quindi nel presente paragrafo vi\u00a0racconto della mia soluzione preferita del problema (i\u00a0codici del risultato finale sono in\u00a0fondo all\u2019articolo).<br \/>\nIn\u00a0totale sono cinque passaggi:<br \/>\n1.\u00a0Separiamo il\u00a0footer dal resto del codice e\u00a0lo\u00a0mettiamo al\u00a0di\u00a0fuori del contenitore generale wrapper.<br \/>\n2.\u00a0Nel file dei stili CSS impostiamo l\u2019altezza (height) del 100% per il\u00a0html e\u00a0per il\u00a0body. In\u00a0questo modo il\u00a0html e\u00a0il\u00a0body verranno estesi per l\u2019intera altezza dello schermo.<br \/>\n3.\u00a0Assegnamo al\u00a0contenitore generale wrapper i\u00a0seguenti parametri:<br \/>\n\u2013\u00a0min-height: 100%; \u2013\u00a0l\u2019altezza minima del wrapper (\u00e8\u00a0necessario farlo per i\u00a0browser moderni, anche se\u00a0i\u00a0browser IE fino alla versione\u00a07 non sanno interpretare il\u00a0min-height);<br \/>\n\u2013\u00a0height: auto !important; \u2013\u00a0tale impostazione della altezza serve per le\u00a0situazioni in\u00a0cui i\u00a0contenuti della pagina necessitano pi\u00f9 di\u00a0una schermata. In\u00a0questo modo il\u00a0div del content si\u00a0estender\u00e0 verso il\u00a0basso finch\u00e9 la\u00a0quantit\u00e0 dei contenuti lo\u00a0richieder\u00e0;<br \/>\n\u2013\u00a0height: 100%; \u2013\u00a0questa impostazione serve ai\u00a0vecchi browser IE.<br \/>\n4.\u00a0Per il\u00a0div content impostiamo il\u00a0padding inferiore pari a\u00a0100\u00a0px\u00a0\u2013 esso serve per \u00abospitare\u00bb il\u00a0footer. Tra poco capirete il\u00a0senso di\u00a0tale operazione. Ora invece devo precisare che il\u00a0suddetto valore del padding deve essere pari alla altezza (height) del footer, quindi al\u00a0posto del 100 potete mettere il\u00a0vostro valore.<br \/>\n5.\u00a0Ora abbiamo l\u2019altezza della pagina pari a\u00a0100% + 100\u00a0px. I\u00a0100 pixel di\u00a0troppo vengono eliminati nel seguente modo: nel file dei stili CSS per il\u00a0footer impostiamo il\u00a0margine superiore negativo di\u00a0stessa quantit\u00e0 di\u00a0pixel della altezza del footer (e\u00a0del valore del padding impostato al\u00a0punto\u00a04). Quindi per il\u00a0footer scriviamo height:\u00a0100\u00a0px; margin-top: \u2212100\u00a0px; Inoltre, ci\u00a0serve la\u00a0caratteristica del footer position: relative; Con l\u2019aiuto del margine negativo il\u00a0footer si\u00a0sposta completamente sull\u2019area inferiore del wrapper (che occupa il\u00a0100% dello schermo) lasciata libera dei contenuti tramite l\u2019impostazione del padding di\u00a0cui al\u00a0punto\u00a04. Qualora i\u00a0contenuti della pagina fossero superiori alla altezza dello schermo, il\u00a0footer si\u00a0vedr\u00e0 solamente al\u00a0completo scrolling della pagina fino in\u00a0fondo.<br \/>\nCon l\u2019utilizzo di\u00a0questo metodo il\u00a0footer sar\u00e0 sempre in\u00a0fondo alla pagina: anche qualora quest\u2019ultima fosse completamente vuota.<br \/>\nUna rappresentazione schematica di\u00a0quello che abbiamo fatto:<br \/>\n<img decoding=\"async\" title=\"il footer in fondo alla pagina\" src=\"https:\/\/eugigufo.net\/images\/inerario\/inerarioart1.jpg\" border=\"0\" \/><br \/>\nEcco il\u00a0codice CSS:<\/p>\n<pre class=\"brush: css; collapse: false; title: listing 1; notranslate\" title=\"listing 1\">\n\nhtml {\nheight: 100%;\n}\nheader, nav, section, article, aside, footer {\ndisplay: block;\n}\nbody {\nheight: 100%;\n}\n#wrapper {\nwidth: 1000px;\nmargin: 0 auto;\nmin-height: 100%;\nheight: auto !important;\nheight: 100%;\n}\n#header {\nheight: 150px;\n}\n#content {\npadding: 0 0 100px;\nheight:400px;\n}\n#footer {\nwidth: 1000px;\nmargin: -100px auto 0;\nheight: 100px;\nposition: relative;\n}\n\n<\/pre>\n<p>E\u00a0la\u00a0parte finale del\u00a0codice HTML del file index.php:<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 2; notranslate\" title=\"listing 2\">\n\u00a0\u00a0\u00a0 &lt;\/div&gt;\n\u00a0\u00a0 \u00a0&lt;!-- end content --&gt;\n\u00a0 &lt;\/div&gt;\n\u00a0 &lt;!-- end main div --&gt;\n&lt;\/div&gt;\n&lt;!-- end wrapper div --&gt;\n<\/pre>\n<p>L\u2019unica modifica da\u00a0fare al\u00a0file footer.php \u00e8\u00a0quella di\u00a0togliere il\u00a0tag &lt;\/div&gt; che chiude il\u00a0div wrapper.<br \/>\nImmagino che ad&nbsp;alcuni miei lettori potrebbe non piacere l&rsquo;idea di&nbsp;avere il&nbsp;footer sempre e&nbsp;in&nbsp;ogni caso fuori dalla prima schermata del browser. Per correggere questo &laquo;difetto&raquo; potremmo fare in&nbsp;questo modo: portare sempre il&nbsp;footer fuori dal div wrapper e&nbsp;poi assegnare a&nbsp;quest&rsquo;ultimo l&rsquo;altezza con il&nbsp;metodo calc(100%&nbsp;&ndash; 100px). Questo metodo &egrave;&nbsp;per&ograve; pericoloso: alcuni browser sanno interpretare il&nbsp;calc() solo nelle loro versioni pi&ugrave; recenti.<br \/>\nSpero che questo paragrafo vi\u00a0sia stato utile.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il paragrafo dell\u2019\u201cInerario\u201d che spiega come fissare, con l\u2019aiuto del CSS, il footer in fondo a una pagina web indipendentemente dalla lunghezza della pagina stessa.<br \/>\nQuesto paragrafo \u00e8 destinato prevalentemente agli sviluppatori frontend.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-462","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=462"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/462\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}