La disposition la plus typique et la plus pratique est celle du haut, du milieu et du bas, avec trois colonnes au milieu. Cet exemple présente deux caractéristiques :
1. L'effet à trois colonnes au milieu peut obtenir n'importe quelle couleur d'arrière-plan sur une seule colonne.
2. Le plus étroit est de 770 px et le plus large est de 1 024 px, ce qui signifie que si la fenêtre est inférieure à 770 xp, la barre de défilement inférieure apparaîtra. Si elle est plus grande que 1 024 px, l'écran sera automatiquement centré.
Parcourir l'effet : http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm
Analyse :
L'emballage le plus extérieur contient tout le contenu imbriqué à l'intérieur, et le tout est positionné de manière relative. max min contrôle déjà très bien les valeurs les plus étroites et les plus larges, mais cela n'a aucun effet sur IE. S'il n'y a pas d'autres mises en page intercalées, cette couche peut en fait être écrite dans le corps, éliminant ainsi une couche d'imbrication.
#wrapper{ width:auto; border:1px solid #000; min-width:770px; ;}
pied de page de l'en-tête extérieur inférieur de l'emballage
L'en-tête est positionné de manière absolue et le pied de page est positionné de manière relative ; les marges extérieures sont respectivement de 130 px à gauche et à droite, ce qui est la clé de la compatibilité avec les non-IE.
#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; en-tête : absolu ; haut : 0 ; gauche : 0 ; largeur : 100 % ; hauteur de la ligne : 70px ; :center; font-size:xx-large}
#footer { width:100%; clear:both; border-top:1px solid #000; ; text-align:center; position:relative;>
clearheader est utilisé pour combler les lacunes de l'en-tête. Clearer est un hack de remplissage couramment utilisé.
Pourquoi la largeur de l'enveloppe extérieure est-elle de 99 % au lieu de 100 % ? Parce que sa couche externe supérieure a une bordure, une largeur de 100 % plus 2 pixels de bordure l'agrandiront, et FF a des effets évidents.
Le traitement du droit est très classique. Il se résout en positionnement sous IE et en flottant sous FF. Le traitement des marges négatives utilise également uniquement l'espace laissé par l'extérieur supérieur.
#clearheader{ hauteur:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; ; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px>
.clearer{ hauteur:1px; ; débordement : masqué ; margin-top : -1px ;
Le contenu central laissé plus clair dans l'emballage extérieur est très simple et l'idée est similaire à l'explication ci-dessus.
