Colonnes fluides avec hauteur et image de fond correspondantes

Question

Je travaille sur une nouvelle mise en page pour mon site qui utilise un en-tête, un pied de page et une zone centrale de deux colonnes. Les deux colonnes se composent de la zone de contenu principal qui est la hauteur et la largeur du fluide et d'une barre latérale droite qui est la hauteur du fluide et la largeur fixe. J'ai déjà fait des mises en page similaires, mais celle-ci dépend de l'utilisation de deux images de fond différentes (une pour la barre latérale et une pour la zone de contenu).

Est-il possible d'implémenter ceci, en utilisant le code HTML approprié & CSS, de sorte que les images d'arrière-plan des deux colonnes aient toujours la même hauteur, quel que soit le contenu des colonnes plus long?

J'ai essayé d'utiliser JavaScript pour simuler cela, mais cela ne fonctionne pas très bien s'il y a des images dans la zone de contenu. Je préférerais vraiment ne pas utiliser cette méthode de toute façon.

Toute aide est grandement appréciée.

J'ai configuré un environnement intermédiaire à http://staging.jamesarmes.net/jimmyssandbox pour fournir un exemple. Cet environnement n'est pas mon produit fini, mais je veux contrôler les conteneurs avant d'aller plus loin. J'ai posté une maquette de mon design au http://www.jamesarmes.net/files/jimmyssandbox-theme1.png.

Answer 1

En supposant une structure HTML quelque chose comme ça

#container 
|-- #main-content 
|-- #sidebar 

que vous souhaitez utiliser faux columns, appliquer l'arrière-plan à répétition #container. Tant que chacun est un arrière-plan à répétition verticale qui n'a pas de problèmes comme chacun ayant besoin de répéter à des hauteurs inconciliables, vous pouvez simplement l'utiliser directement. Mais, puisque vous dites que la zone de contenu principale est fluide, cela pose quelques problèmes. "Creating Liquid Faux Columns" pourrait travailler pour vous.

Sinon, j'envisager d'utiliser de faux-colonnes régulières et sacrifier un non-sémantique div que vous faites à étirer sur toute la hauteur de #container avec conflicting absolute positions. Les fausses colonnes régulières seraient positionnées pour couvrir la colonne de largeur fixe et, étant très large, fourniraient un fond à la colonne de fluide jusqu'à ce que le div absolument positionné, contenant l'extrémité opposée de l'arrière-plan répétitif, entre en jeu. La structure est juste

#container 
|-- #bghack 
|-- #main-content 
|-- #sidebar 

avec #bghack étant derrière ses frères et sœurs.