On va commencer par un peu de méthodologie 
Déjà, il vaut mieux avoir un code le plus "simple" possible, histoire d'avoir moins de choses à gérer, par exemple.
Ainsi,
<div id="zonetexte">
<div id="texte1">
<h1>Contact </h1>
</div>
<div id="texte2">
[... tout le reste ...]
</div>
</div>
Peut être simplifié et éclairci en :
<div id="zonetexte">
<h1>Contact </h1>
[... tout le reste ...]
</div><!-- fin de div#zonetexte -->
Notez le commentaire HTML à la fin. Ça n'a pas l'air bien utile comme ça, mais ça permet de s'y retrouver dans le code une fois qu'on a inséré les 40 lignes de code du contenu résumé ici entre crochets. De plus, c'est super utile lorsque l'on ferme deux ou trois (ou plus) divs à la suite, ça permet de s'assurer que l'on n'en oublie pas une au passage.
Bref, c'est un peu présomptueux de ma part de parler de
méthodologie alors qu'il ne s'agit que d'une pratique personnelle, mais je trouve que ça aide pas mal. De plus, ça aide beaucoup ceux qui voudraient donner un coup de main pour débuguer un code HTML/CSS, ou les personnes qui pourraient reprendre le site plus tard. Ça ne fait pas de mal de voir un peu sur le moyen terme, non ?
Le problème de la page web en height 100%
Bon, je suis loin d'être un expert dans ce domaine, mais pour l'instant je n'ai jamais été convaincu par l'efficacité des règles du type :
html, body {height: 100%;}
Dont on se sert généralement pour (tenter de ?) obtenir une page qui prendra toute la hauteur disponible dans la page. On se retrouve généralement avec pas mal de problèmes pas évidents à gérer. Sans oublier les problèmes de différences d'interprétation de la propriété
height.
Dans ce cas précis, on a :
html {height: 100%;}
body {height: 100%;}
#boxgenerale {height: 90%;}
Déjà, on pourrait éviter d'avoir des problèmes avec les marges et padding par défaut de html et body, ça aiderait.
html, body {margin: 0; padding: 0; height: 100%;}
Ensuite, la #boxgenerale à 90%, ça me semble un peu aléatoire. Les navigateurs n'ont pas trop l'air d'aimer ça avec une petite résolution. Enfin bref, ça me semble un peu problématique.
Je conseille donc fortement une mise en page avec div de contenu dotée d'une hauteur minimale (genre 400px)... suivie d'une div pour le pied de page.
<body>
<div id="entete">
...
</div><!-- fin de div#entete -->
<div id="contenu">
...
</div><!-- fin de div#contenu -->
<div id="piedpage">
...
</div><!-- fin de div#piedpage -->
</body>
L'en-tête peut avoir une hauteur fixe ou non, la div#contenu aura une hauteur minimale, et la div#piedpage viendra se mettre juste en dessous.
Si on veut centrer le tout, on utilisera les marges automatiques. Soit à chaque fois pour chaque partie, soit en englobant le tout dans une seule div contenante.
Maintenant, si on veut absolument que la page prenne 100% de la hauteur disponible, on peut se lancer dans les bidouillages (potentiellement) dangereux.
Bon, oublions tout de suite le pied de page en positionnement absolu : il se retrouverait en bas de l'écran (avec un bottom: 0;), mais en cas de scroll sur la page il resterait sur place !
À moins d'utiliser des techniques détournées pour faire du faux position: fixed;, rien à en tirer [Note: ces techniques consistent à supprimer le scroll du body, et à en rajouter un à une div en hauteur fixe que l'on fera passer pour la page en lui donnant une hauteur à 100%... J'aime très moyennement cette méthode, mais c'est une possibilité].
À propos de position: fixed;, ça serait la solution la plus intéressante, surtout si on cherche à avoir un pied de page ou un en-tête "permanent" (utile s'il contient un menu de navigation, par exemple !). Mais vu l'incompatibilité de cette propriété avec IE 6 et inférieur (quid de IE 7 ?), il faudra :
- soit se passer de position: fixed; mais en simuler le comportement (cf note ci-dessus) ;
- soit se contenter d'une "dégradation gracieuse" (ou du moins acceptable) dans IE, via l'utilisation d'une feuille de style liée dans un commentaire conditionnel (on pourra remettre l'élément en question en positionnement "static", par exemple, ou en positionnement absolu pour un menu latéral ou un en-tête, dans certains cas précis).
Ébauche de solution alternative (zéro garantie)
On pourrait envisager d'utiliser un conteneur général pour dédoubler le body (oui je sais, pas drôle). Ce conteneur sera en min-height: 100%;, et comprendra tout le contenu de la page SAUF le pied de page.
Le pied de page sera lui en positionnement absolu, avec une marge négative pour le remonter de sa hauteur.
Voilà ce que ça donne :
http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html
Si le contenu est court, la page prend bien tout l'écran et le pied de page vient se placer en bas. Mais aucun scroll n'apparaît, donc tout va bien.
Si le contenu est long, le pied de page se place tout en bas de la page. Il n'est pas visible tant que l'on ne fait pas défiler la page.
Pas encore testé avec Safari et IE Mac. Pour le reste, ça passe partout sauf sur Konqueror.
et je me demande pourquoi j'ai utilisé un positionnement en absolu moi ! Ah oui, j'avais peur qu'un bloc en positionnement statique ne force la page à augmenter de la hauteur du pied de page (on aurait eu une page de hauteur 100% + hauteur du pied de page... donc un scroll systématique). C'est le comportement avec un bloc en positionnement relatif décalé vers le haut grâce à la propriété top, mais apparemment les marges négatives sur un élément statique ne provoquent pas ce comportement.