Raphael a écrit :
Je ne vois pas comment une position absolue arrangerait les choses 
En fait il n'est pas possible de cumuler des tailles d'unités fixes et fluides à la fois (ici 20px + 5px + 100% : cela va forcément dépasser, vu le modèle de boite).
Justement, pour le coup le positionnement absolu aurait été parfait :
div#global {
position: absolute;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
border: solid 5px red;
}
Et voilà, le tour est joué. Sauf qu'il y a deux problèmes :
1 - ça ne passe pas dans IE (même dans IE7) ;
2 - si le contenu dépasse la hauteur de la zone laissée pour l'affichage, ça débordera, ou bien il faudra utiliser une barre de défilement interne -- ce qui n'est pas une bonne idée.
Pour ma part, je vois bien une solution détournée à base de positionnement fixe.
[b]HTML :[/b]
<body>
<span id="bordure-haut"></span>
<div id="global">
<div id="global-bis"
... bla bla mon contenu ...
</div>
</div>
<span id="bordure-bas"></span>
</body>
[b]CSS :[/b]
html, body {
height: 100%;
margin: 0; padding: 0;
}
div#global {
min-height: 100%;
margin: 0 20px;
border: solid red;
border-width: 0 5px;
}
div#global-bis {
padding: 30px 0;
/* On évite des problèmes de fusion des marges,
ainsi que des problèmes de recouvrement de contenus */
}
span#bordure-haut {
position: fixed;
width: 100%;
top: 0; left: 0;
height: 20px;
border-bottom: solid 5px red;
background: white;
}
span#bordure-bas {
position: fixed;
width: 100%;
bottom: 0; left: 0;
height: 20px;
border-top: solid 5px red;
background: white;
}
À partir de cette base, il nous faut encore plusieurs aménagements :
1 - obtenir un équivalent de
min-height dans IE 6 et inférieur (voir la FAQ du forum, sur
min-height dans IE6 et sur les commentaires conditionnels) ;
2 - IE7 comprend
position: fixed, mais pas IE6 et IE5... il faudra donc basculer en
position: absolute, par exemple, ce qui demande certains aménagements. On peut aussi décider de ne pas afficher les deux bordures dans IE6 et inférieurs : via un commentaire conditionnel :
span#bordure-haut, span#bordure-bas {display: none;}
</edit> 