La simplicité du CSS réside dans sa facilité d’apprentissage ; la difficulté du CSS réside dans la recherche de meilleures solutions. Dans le monde du CSS, la perfection ne semble pas exister. Par conséquent, le CSS introduit maintenant est le dernier absolu, et c'est tout simplement la solution la plus parfaite parmi les solutions que j'ai vues jusqu'à présent.
Parlons d'abord de la raison pour laquelle nous utilisons cette solution de mise en page CSS inférieure :
Lors de la création d'une page, si le contenu de la page est très petit et ne suffit pas à remplir la zone de fenêtre d'un écran, selon la mise en page ordinaire, il ressemblera à l'image ci-dessous (c'est-à-dire que le contenu du bas n'est pas situé en bas de la fenêtre, mais laisse beaucoup de blanc.
C'est inesthétique pour un designer à la recherche d'imperfection. Il existe quelques solutions sur Internet, mais lors du changement de hauteur de la fenêtre, le bas et le texte principal se chevauchent BUG. Même si peu de gens prendraient la peine de modifier la hauteur des fenêtres, le design est avant tout une question de perfection.
Voici une méthode relativement parfaite que j'ai trouvée, qui peut être réalisée par un expert en design étranger en utilisant du CSS pur : Lorsque le contenu du texte est petit, le bas se trouve en bas de la fenêtre. Il n'y aura aucun problème de chevauchement lors de la modification de la hauteur de la fenêtre.
Même la personne qui a créé ce CSS a créé un site Web pour présenter cette solution de mise en page de fond CSS. Je ne sais pas s'il a déposé un brevet :)
Code HTML :
Remarque : La condition préalable à l'utilisation de cette mise en page est que le pied de page doit être en dehors du conteneur div général. Le pied de page utilise un calque et tout le reste du contenu utilise un calque général. Si vous avez vraiment besoin d'ajouter d'autres calques frères, alors ce calque frère doit utiliser position:absolute pour un positionnement absolu.