Share
Il y a un problème familier dans la conception Web qui existe depuis que nous sommes passés de la conception basée sur des tables à l'ère CSS, c'est:
Comment puis-je avoir des arrière-plans à 100% de hauteur dans ma mise en page flexible à plusieurs colonnes??
Il existe quelques solutions à ce dilemme. Cependant, celui que nous sommes sur le point de couvrir pourrait convenir à votre projet si vous avez besoin de:
Une option consiste à commander l'un des services de personnalisation de site Web rapides et efficaces auprès d'Envato Studio. Vous pouvez choisir parmi une variété de fournisseurs expérimentés, consulter leurs avis, puis leur envoyer les détails des modifications exactes dont vous avez besoin..
Sinon, commençons par un rapide coup d'oeil au problème.
La photo ci-dessous montre une disposition simple à trois colonnes, utilisant une approche standard consistant à faire flotter chaque colonne à gauche. Avec les arrière-plans appliqués par défaut, les colonnes s’adaptent à la hauteur de leur contenu, comme suit:
Ceci est fonctionnel, mais pas tout à fait la disposition la plus agréable à l'oeil en raison de la différence de hauteur significative.
Le code HTML ci-dessus place trois éléments "contenu de colonne" dans un wrapper:
………
Le CSS pour ces éléments "contenu de colonne" est:
.contenu largeur: 60%; float: gauche; rembourrage: 20px 30px; background: #fff; couleur: # 6d7072; .sidebar width: 20%; float: gauche; rembourrage: 20px 30px; arrière-plan: # 5f6673; couleur: # ebeef3; taille de la police: 90%; .sidebar_two width: 20%; float: gauche; rembourrage: 20px 30px; arrière-plan: # 434750; couleur: # ebeef3; taille de la police: 90%;
Lorsque nous nous référons à des colonnes de hauteur égale, nous voulons généralement satisfaire à deux conditions:
Dans notre exemple ci-dessus, nous remplissons déjà la première condition de hauteur flexible. Cependant, les styles d'arrière-plan et les règles de hauteur flexibles font tous partie de la même classe, appliqués au même élément. Quelle que soit la hauteur définie par l'élément, l'arrière-plan les suivra également..
Par conséquent, si nous voulons que les arrière-plans aient des paramètres de hauteur différents, nous aurons besoin d'éléments séparés auxquels nous pouvons appliquer les styles d'arrière-plan, ainsi que leur propre ensemble de règles de hauteur. Pour créer ces éléments séparés sans ajouter de balise supplémentaire, nous allons utiliser pseudo-éléments.
Pour chaque colonne, nous utiliserons le :avant pseudo-sélecteur pour générer un pseudo-élément distinct, auquel nous appliquerons un style d'arrière-plan. Nous utiliserons ensuite une combinaison de positionnement absolu et de z-index placer ces arrière-plans derrière le contenu de chaque colonne et les régler à une hauteur uniforme.
Le nouveau CSS pour chaque colonne devient:
.contenu,. contenu: avant largeur: 60%; .content float: left; rembourrage: 20px 30px; couleur: # 6d7072; .content: before content: "; position: absolute; haut: 0; bas: 0; z-index: -1; gauche: 0; arrière-plan: #fff;
.sidebar, .sidebar: before width: 20%; .sidebar float: left; rembourrage: 20px 30px; couleur: # ebeef3; taille de la police: 90%; .sidebar: before content: "; position: absolute; haut: 0; bas: 0; z-index: -1; gauche: 60%; couleur de fond: # 5f6673;
.sidebar_two, .sidebar_two: before width: 20%; .sidebar_two float: left; rembourrage: 20px 30px; couleur: # ebeef3; taille de la police: 90%; .sidebar_two: before content: "; position: absolute; haut: 0; bas: 0; z-index: -1; gauche: 80%; couleur de fond: # 434750;
Ce qui nous donne une présentation de jolies hauteurs de colonnes, même:
En bref, ce que nous faisons ici, c'est de positionner absolument les pseudo-éléments "détenteurs d'arrière-plan" derrière les éléments "contenus de colonnes" habituels afin de créer des styles d'arrière-plan..
Parce que ces pseudo-éléments "détenteurs d’arrière-plan" sont parfaitement positionnés, nous pouvons leur indiquer exactement où leurs bords extérieurs doivent se trouver, tout en permettant aux éléments "contenu de la colonne" d’être de la hauteur ou de la largeur souhaitées..
le 
Accentsconagua
.emballage element, ses trois éléments enfants et leurs pseudo-éléments
Chaque élément de colonne a un pseudo-élément correspondant, qui sert d'arrière-planImportant:Vos colonnes doivent être à l’intérieur d’un wrapper parent (.emballage dans ce cas) réglé sur position: relative; afin que le positionnement absolu fonctionne. Cela devrait disparaître après les colonnes flottantes pour s'assurer qu'il reçoit une valeur de hauteur pour les arrière-plans à étirer..
Il existe quelques bonnes approches qui suggèrent d’autres moyens de résoudre ce problème. Si vous n'avez pas besoin des avantages spécifiques de cette approche, vous pouvez préférer l'une des solutions suivantes..
Si vous envisagez d'utiliser uniquement des couleurs à plat dans vos arrière-plans, une solution très astucieuse consiste à appliquer un dégradé CSS horizontal, en créant des bandes de couleur à aligner avec vos colonnes. Découvrez comment, grâce à Chris Coyier.
Toutefois, si votre conception a besoin d’images, de marges, d’effets CSS3, etc., appliquées à vos arrière-plans, notre technique "détenteur d’arrière-plan" peut être plus adaptée, par exemple..
Une autre solution très intéressante consiste à utiliser les pseudo-sélecteurs :avant et :après sur l'emballage parent des colonnes pour créer jusqu'à trois colonnes avec des arrière-plans d'égale hauteur. Vous pouvez lire sur cette technique, expliquée par Nicolas Gallagher.
D'autre part, si vous avez besoin de plus de trois colonnes, vous pouvez utiliser notre technique de "détenteur d'arrière-plan", car vous pouvez avoir autant de colonnes que vous le souhaitez. par exemple.
Une fois que nous constatons une prise en charge généralisée de la flexbox dans les navigateurs, il devrait être assez simple de procéder de la sorte sans faire appel à des pseudo-éléments.
Cependant, d’ici là, c’est un excellent moyen de faire le travail. Il vous permet de conserver une largeur flexible pour des mises en page réactives, d'utiliser autant de colonnes que vous le souhaitez et d'appliquer n'importe quel style de fond.
