La méthode ultime pour la hauteur adaptative de la mise en page CSS

Cet article présente principalement la méthode ultime de mise en page CSS adaptative. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Le but ultime de notre composition est. pour créer le programme, les utilisateurs peuvent lier rapidement, et les données réelles finales peuvent être les mêmes que les rendus. Cependant, nous rencontrons souvent des hauteurs incertaines des colonnes gauche et droite dans les pages en forme de chinois, nous devons donc nous adapter aux deux colonnes. Veuillez voir la solution

, la hauteur de chaque colonne (la hauteur de laquelle colonne ne peut pas être déterminée à l'avance) est l'objectif poursuivi par chaque concepteur. Selon la pratique générale, la plupart d'entre eux utilisent la méthode de remplissage. dans les images d'arrière-plan et en ajoutant des scripts JS pour que les colonnes soient les mêmes. Ce que cet article présentera est de résoudre le problème des mêmes hauteurs de colonnes en combinant le masquage partiel du débordement du conteneur avec la limite inférieure négative de la colonne et. le patch intérieur positif.

Regardez d'abord le code :

#wrap{
 overflow: hidden;
 }

#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px; 
 }

Principe de mise en œuvre :

Les éléments de bloc doivent être contenus dans un conteneur.

Appliquer le débordement : caché aux éléments du conteneur.

Appliquez padding-bottom (une valeur suffisamment grande) à l'élément block de la colonne.

Appliquez margin-bottom (une valeur suffisamment grande) à l'élément block de la colonne.

padding-bottom étend la colonne à la même hauteur et une marge négative la ramène à la position de départ en bas. En même temps, la partie de débordement est masquée.

Compatible avec tous les navigateurs

IE Mac 5

Obtenez très correct, alors filtrez le code ci-dessus.

/*\*/
#sideleft, #sideright{
 padding-bottom: 32767px;
 margin-bottom: -32767px; 
 }
/**/

Opera

1. Opera7.0-7.2 ne peut pas effacer correctement la partie de débordement, alors ajoutez :

/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]'; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*\*/
#wrap
 {
 display: block;
 }
/* end easy clearing */
/*\*/

2. Opera8 gère le débordement : caché là. est un BUG, ​​et le code suivant doit être ajouté :

/*\*/
#sideleft, #sideright
 {
 padding-bottom: 32767px !important;
 margin-bottom: -32767px !important; 
 }
@media all and (min-width: 0px) {
#sideleft, #sideright
 {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important; 
 }
#sideleft:before, #sideright:before
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/

3 B2 d'Opera 9 corrige le bug de 8.

Environnement de test : IE5.01, IE5. .5, IE6.0, Firefox1.5, Opera8.5, Netscape 7.2 réussis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!