div hauteur variable avec fond personnalisé-image - quelle est la meilleure technique?

Question

Je voudrais produire quelque chose comme les 4 boîtes au bas de la page d'accueil apple.com, sauf que je voudrais qu'ils soient hauteur variable.

Les techniques les plus simples que je peux penser est d'avoir deux divs. Le premier contenant tout sauf le fond « plafond » dans son background-image, et la seconde div avec le bouchon inférieur, comme ceci:

<div class="top-and-middle"> 
</div> 
<div class="bottom"> 
</div> 

/-----------------\ ^
|     | | 
|     | | 
| top-and-middle | | <this height can stretch 
|     | | 
|     | v 
------------------- 
|  bottom  | 
\-----------------/ 

Mais cela me paraît pas si élégante .. il y une meilleure façon? Peut-être juste un div? De préférence avec juste CSS, mais peut-être aussi PHP ou Jquery.

Answer 1

La technique habituelle utilisée aujourd'hui est divs imbriqués, plutôt que séparés. Chacun a sa propre image d'arrière-plan, une alignée en haut, une alignée en bas, avec l'arrière-plan intérieur (non-répétitif), et l'arrière-plan arrière assez grand pour s'adapter à toute hauteur raisonnable de div.

<div class="box"><div class="wrap"> 
    content 
</div></div> 

.box { background: url(/img/box-top-and-middle.png) top left no-repeat; } 
.box .wrap { background: url(/img/box-bottom.png) bottom left no-repeat; } 

L'avantage de ceci est que vous pouvez plus facilement avoir l'arrière-plan des bords sous le contenu.

Ceci a été popularisé comme 'sliding doors' pour le cas horizontal (bien que la technique ait certainement été utilisée bien avant cet article). Diverses autres combinaisons, telles que trois divs imbriqués avec un arrière-plan principal répétitif et des images latérales séparées, et dans le cas pathologique un nid de divs de 9 profondeurs pour tous les côtés (vous n'avez jamais vraiment besoin de cela en pratique).

Les bonnes nouvelles sont que CSS3 vous pouvez avoir plusieurs images de fond sur un seul élément, supprimant la nécessité pour toutes les divs wrapper supplémentaires:

.box { 
    background: 
     url(/img/box-top-and-middle.png) top left no-repeat, 
     url(/img/box-bottom.png) bottom left no-repeat; 
} 

cela fait partie du module de nifty Backgrounds and Borders. Malheureusement, il n'est pas pris en charge dans IE jusqu'à la prochaine version 9, de sorte que vous ne pouvez vous en passer si vous ne le dérange pas à regarder skewiff dans les versions actuelles d'IE et d'autres navigateurs plus anciens.