28172 sujets

CSS et mise en forme, CSS3

Bonjour.

Actuellement j'ai la structure de mon site qui se présente de cette manière :
<div class="bg-gauche">
   <div class="bg-droit">
      ...
   </div>
</div>


En gros j'ai une div qui me sert à définir mon background gauche, et l'autre mon background droit. Le problème c'est que malgré le repeat-y du background, il s'arrête dès que le contenu du site s'arrête et laissant tout mon espace en bas vide.
En cherchant un peu j'ai donc trouvé une astuce qui permet de mettre la taille du background en fonction du viewport, le problème étant que ça bloque au niveau de ma deuxième div.
Actuellement mon css ressemble à ça :
html { height: 100%; }
body { height: 100%; }
.bg-gauche { background: url("...") repeat-y left; min-height: 100%; }
.bg-droit { background: url("...") repeat-y right; min-height: 100%; }


Le truc c'est que le background de ma deuxième div s'arrête au niveau du contenu du site alors que le premier va bien jusqu'en bas. Il y a t'il un moyen pour lui définir un comportement pour ma deuxième de façon à ce que le background arrive bien jusqu'en bas ?

Merci d'avance.