Si nous voulons ajouter une ligne de pied de page à la fin de la mise en page à 3 colonnes pour mettre des informations telles que le droit d'auteur. J'ai rencontré le problème de devoir aligner le bas de 3 colonnes. Dans la disposition des tableaux, nous utilisons la méthode d'imbrication des grandes tables dans de petites tables, qui peuvent facilement aligner les trois colonnes ; avec la disposition div, les trois colonnes sont dispersées indépendamment et le contenu est de hauteurs différentes, ce qui rend l'alignement difficile. En fait, nous pouvons imbriquer complètement les divs et placer trois colonnes dans un seul DIV pour obtenir un alignement inférieur. Voici un exemple d'implémentation (une zone de fond blanc simule une page) :
Corps
Le code principal de cette page d'exemple est le suivant :
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Les feuilles de styles spécifiques sont rédigées dans les sections correspondantes. Le point clé est que la couche #mainbox est imbriquée dans trois couches : #menu, #sidebar et #content. Lorsque le contenu de #content augmente, la hauteur de #content augmentera, et la hauteur de #mainbox s'agrandira également, et le calque #footer descendra automatiquement. Cela permet d’atteindre un haut degré d’adaptabilité.
Il convient également de noter que #menu et #content flottent sur le côté droit de la page "FLOAT: right;", #sidebar flotte sur le côté gauche du calque #menu "FLOAT: left;", c'est le positionnement par méthode flottante, et vous pouvez également utiliser le positionnement absolu pour obtenir cet effet.
Un autre problème avec cette méthode est que l'arrière-plan de la barre latérale #sidebar ne peut pas être à 100 %. La solution générale est de le remplir avec la couleur de fond du corps. (La couleur d'arrière-plan de #mainbox ne peut pas être utilisée car la couleur d'arrière-plan de #mainbox n'est pas valide dans les navigateurs tels que Mozilla.)
Bon, la charpente principale a été construite, le travail restant consiste simplement à y ajouter des briques et des tuiles. Si vous souhaitez essayer d'autres mises en page, je vous recommande de lire les articles suivants :
16 exemples de mise en page CSS
onestab : démonstration de mise en page composite à trois colonnes
onestab : disposition à trois colonnes librement extensible
