J'ai donc une page Web avec un en-tête, un corps principal et un pied de page. Je veux que le corps principal remplisse 100 % de la page (100 % entre le pied de page et l'en-tête). Mon pied de page est en position absolue avec un fond de 0 : Chaque fois que j'essaie de définir la hauteur du corps principal à 100 % ou de modifier sa position, il déborde également de l'en-tête. Si je règle le corps en position absolue avec top: 40 (parce que mon en-tête fait 40px de haut), il ira 40px trop bas, créant une barre de défilement.
J'ai créé un simple fichier html puisque je ne peux pas afficher la page complète du projet actuel. Avec l'exemple de code, même si le corps du contenu principal remplit l'écran, il descend de 40px trop bas (à cause de l'en-tête, je suppose).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>Quelqu'un connaît la réponse ?
