28172 sujets

CSS et mise en forme, CSS3

[Résolu] Hauteur du container

Bonjour tout le monde,

Je réalise actuellement un site en html/css, et je me retrouve confronté à un petit problème.

Toutes mes pages sont de la forme suivante : 


<body>
    <div id="container">
        ... <!-- Mon contenu de la page -->
    </div>
</body>


Et mon css contient ceci

body{
background : url('uneimagedefond.jpg') repeat-y;
width:100%;
}
#container{
  background-color: rgba(0,0,0,0.7); /* Le but de ceci est de mettre un "voile" sur l'image de fond */
}


Seulement, la hauteur de mon #container dépend de ce qu'il contient. Et j'aimerais, lorsque la hauteur de son contenu est inférieure à 100% de la hauteur, qu'il fasse quand même 100% de la hauteur, pour que le "voile" occupe toute la page. J'aimerais aussi que sur les pages dont le contenu a une hauteur supérieure à 100% (avec un scroll, ou ascenseur), le container fasse la hauteur du contenu (pour que le "voile" occupe tout l'espace occupé par le contenu).

J'ai pensé à utiliser un "min-height" sauf que je ne sais pas quelle valeur y mettre, sachant que je ne veut pas que ceux dont les écrans ont une hauteur de 600px par exemple aient un ascenseur à cause d'un "min-height" qui serait de 700 par exemple.

Je sais pas si j'ai été clair dans ma requête. Je suis prêt à ré-expliquer différemment si ce n'est pas le cas.

Je vous remercie d'avance en tout cas !

Bidy
Modifié par bidy (05 Sep 2013 - 16:50)
Bonjour,

la solution la plus simple serait de ne pas mettre ton "voile" sur le #container, mais sur un :before (de préférence sur le body d'ailleurs). Tu pourrais ainsi, en le mettant en position fixe ou absolue, l'étirer sur toute la surface du navigateur très facilement (top:0; bottom:0; left:0; right: 0;).

Il suffira de jouer du z-index pour le caler derrière ton contenu.

Est-ce que cette piste correspond à ce que tu cherches ?
Je ne suis pas sur d'avoir compris.

Tu suggère que je laisse mon HTML tel qu'il est, et que je remplace mon css de ça :


body{
background : url('uneimagedefond.jpg') repeat-y;
width:100%;
}
#container{
  background-color: rgba(0,0,0,0.7); /* Le but de ceci est de mettre un "voile" sur l'image de fond */
}


à ça 


body{
background : url('uneimagedefond.jpg') repeat-y;
width:100%;
}
#container:before{
  background-color: rgba(0,0,0,0.7); 
}


?

J'ai essayé, ça ne me donne rien malheureusement
C'est bon, j'ai utilisé la méthode du positionnement absolu du #container, en laissant le même CSS qu'avant. Ça donne donc :

HTML

<body>
    <div id="container">
        ... <!-- Mon contenu de la page -->
    </div>
</body>


CSS 

body{
background : url('uneimagedefond.jpg') repeat-y;
width:100%;
}
#container{
  background-color: rgba(0,0,0,0.7); /* Le but de ceci est de mettre un "voile" sur l'image de fond */
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}


Merci à toi de t'être penché son mon cas.

Bonne continuation !!
Sujet clos
Aller à