Un piccolo vezzo che mi piace applicare ai siti mobili che sviluppo è quello di settare l’altezza minima della pagina in base a quella del display. Lo faccio perchè, diversamente, pagine con poco contenuto risulterebbero esteticamente poco gradevoli con il footer troppo ravvicinato all’header.
Una tecnica piuttosto semplice per ottenere questo risultato consiste nell’utilizzare un po’ di Javascript per fare un po’ di conti in base all’altezza del display e degli elementi della pagina.
All’interno del nostro file clientscript.js andiamo, quindi, ad inserire queste poche righe di codice (che sfruttano la potenza del framework jQuery anch’esso già incluso nella nostra pagina web):
$(function(){
/*
POSIZIONO IL FOOTER IN FONDO AL DISPLAY
*/
var altezza = $(window).height(); // calcolo altezza display
var menu = 95; // altezza menu + bordo + margine
var footer = 40; // altezza footer
var contenuto = (altezza-menu-footer); // calcolo altezza minima del contenuto
$('#contenuto').css('min-height',contenuto); // assegno
});Grazie a questo codice il nostro footer andrà a posizionarsi sempre sul fondo del display anche se la nostra pagina presenta poche righe di contenuto.
Ovviamente l’utilità di jQuery non si risolve a questo piccolo codice, nel proseguo della guida il noto framework Javascript ci tornerà utile altre volte…
