Elements disparaissent sous footer

Merci pour la réponse.
Malheureusement ça fonctionne uniquement pour Firefox. Chrome et Explorer ne réagissent pas.

Je travaille uniquement en % car je fais du responsive mais ici je ne pense pas que ce soit ça qui infllue sur le fait que mes éléments disparraissent en dessous du footer.
Je travaille très rarement avec un footer fixe mais là c'est le cas et je pense que c'est ça que je gère mal.

Une autre idée?

essaie ca comme modele (j'ai mis des border etc pour voir les div)
ca marche sous tout navigateurs

css

html {
height:100%;
}
body {
height:100%;
min-height:100%;
}
header {
width:100%;
position:fixed;
top:0px;
height:15%;
background-color:red;
border:1px solid black;
}
#contenu {
width:100%;
height:4000px; /*****a enlever quand il y aura du contenu ***/
background-color:grey;
border:1px solid blue;
margin: 15% 0;
}
footer {
width:100%;
position:fixed;
height:15%;
background-color:red;
border:1px solid black;
bottom:0px;
}

html

<header></header>
<div id="contenu">
</div>
<footer></footer>

Toujours pas malgrè différent essais :/

Je l'ai mis sur CopePen en gardant le strict minimum pour que ce soit plus lisible. Si tu as le temps de jeter un oeil ce serait sympa: http://codepen.io/anon/pen/JKGzc

Juste une petite manip à faire pour voir la chose: mon textarea qui contient le contenu est un ckeditor, donc en réalité il fait 7~8 cm de haut. Etire le jusqu'à cette taille et tu comprendras mon souci (les images Valider et Retour passent en dessous du footer)

Salut
déja mets ton form dans un div et applique un margin bottom a ce div de 5%

ensuite une erreur est provoqués par le line-height de footer p
(le line height est supérieur à la hauteur de footer suivant l'ecran)

sinon le code que je t'ai donné marche (testé)

Merci ça marche plutôt pas mal ;) Les images disparaissent toujours lorsque l'affichage se fait de la taille d'un mobile mais ça n'est pas le plus important pour le moment.

Bonne journée et merci