HTML et Body ne prennent pas tout le navigateur - problème HTML5?

Question

Je ne sais pas ce que je fais de mal, mais pour une raison quelconque, je rencontre un bogue avec mon balisage qui fait que mon élément de corps et mon élément html ne prennent pas toute la fenêtre dans le navigateur.

Je n'arrive pas à aller au fond des choses. Il a d'abord élevé sa tête quand j'ai essayé d'ajouter une bordure pourpre 10px au haut et au bas de mon corps.

Si vous inspectez la page dans Firebug, vous pouvez voir qu'il y a un gros morceau de la page qui n'est pas mis en surbrillance lorsque vous passez la souris sur l'élément html ou l'élément body. Et la bordure que j'ai appliquée en bas est très loin sur la page.

Est-ce que quelqu'un sait pourquoi c'est? Cela pourrait-il avoir à faire avec mon utilisation de HTML5?

est ici la page en question: http://electricorangecreative.com/test/index.html

Et voici mes feuilles de style: http://electricorangecreative.com/test/reset.css http://electricorangecreative.com/test/style.css

Answer 1

Utilisez un sticky footer technique.

Answer 2

J'ai jeté un œil à la page de test en cours et il semble que le seul problème en suspens soit l'affichage de la barre de défilement verticale sans avoir besoin de le faire. La solution la plus simple pour cela consiste simplement à supprimer toute marge ou marge que vous avez sur les éléments que vous avez définis sur height:100%. Le coupable que j'ai identifié est div#wrapper. Enlever le padding là et le problème est résolu (dans FF au moins - pas testé sur d'autres navigateurs). Depuis le remplissage est ajouté à la hauteur que vous vous retrouvez avec un élément qui s'étend verticalement à plus de 100%. Utilisez des marges sur les enfants au lieu de rembourrage - ça devrait aller!