J'ai les éléments suivants :
CSS
#pageBody
{
height: 500px;
padding:0;
margin:0;
/*border: 1px solid #00ff00;*/
}
#pageContent
{
height:460px;
margin-left:35px;
margin-right:35px;
margin-top:30px;
margin-bottom:30px;
padding:0px 0 0 0;
}
HTML
<div id="pageBody">
<div id="pageContent">
<p>
blah blah blah
</p>
</div>
</div>
Si je décommente la ligne de bordure dans pageBody, tout s'adapte parfaitement... J'ai gardé la bordure pour vérifier que tout se passe comme prévu. Mais en enlevant la bordure, pageBody descend la page d'environ 20px, alors que pageContent ne semble pas bouger du tout.
Il ne s'agit pas de la vraie page, mais d'un sous-ensemble. Si rien n'est évident, je peux essayer de générer un échantillon minimal fonctionnel, mais j'ai pensé qu'il pourrait y avoir une réponse rapide et facile d'abord.
Je rencontre exactement le même problème dans Chrome et IE8, ce qui suggère que c'est moi et non le navigateur. Des conseils pour savoir où chercher ? Je me suis demandé si la bordure de 1px n'était pas un point de basculement rendant le contenu d'une division trop grand, mais le fait de modifier la hauteur de #pageContent à 400, par exemple, ne fait aucune différence, si ce n'est que le bas de cette division est coupé.