28172 sujets

CSS et mise en forme, CSS3

[résolu] Height 100% ?

Bonjour,
j'ai un souci avec la height 100%
Je ne sais pas si il existe une solution mais dans le doute je vous pose la question.

J'ai une div qui me sert de colonne, avec une image de fond qui se répète.
Le div est en height 100%.

Cela fonctionne relativement bien.
Mais si par hauteur la taille de la fenetre du navigateur est inférieur à la hauteur du contenu de mon div, lorsqu'on utilise l'ascenseur pour scroller ver sle bas.
Mon image de fond n'apparaît plus.

Voila mon code html:
    
    <body>  
        <div id="central">
      	    <div id="bando">
                Contenu du bando.
             </div>
        </div>
    </body>       
</html>




/*----------------------RESET----------------------------*/
html, body, div, span, applet, object, iframe, hr, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	color:inherit;	
	text-decoration:none;
	outline: none;
	vertical-align: baseline} 
ol, ul {
	list-style: none}

/*--------------------GLOBAL-----------------------------*/
html{
	width:100%;
	height:100%}	
body {
	width:100%;
	height:100%;
	color:#6c3f3f;
	background:#ece8e7 url(IMG/fond_degrade.gif) repeat-x;
	font-family:Helvetica, Futura, Arial, Verdana; 
	font-size:0.65em}
#central{
	width:900px;
	margin:0 auto}
	
/*--------------------BANDO-----------------------------*/
#bando{
	float:left;
	width:192px;
	height:100%;
	background:url(IMG/fond_bando.png) repeat-y;
	padding:0 8px 0 0;
}

Modifié par casp (22 Mar 2011 - 18:54)
Edit une erreur s'est glissé dans mon post précédent:

Le div central possède lui aussi un height:100%;
bonjour,

ton div central devrait etre mis en min-height:100%; pour pouvoir s'etirer.

Le div flottant enfant ne pourra pas recevoir de height:100%; car min-height ne peut pas servir de valeur de reference.

L'image de la colonne devra etre placé dans le conteneur central et le contenu placé dans un conteneur au contexte de formatage modifié pour s'ecarter de la 'zone colonne' .

ce qui donnerait comme base(ton code avec quelque modif) :
html, body, div, span, applet, object, iframe, hr, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font-weight: inherit; 
    font-style: inherit; 
    font-family: inherit; 
    color:inherit;     
    text-decoration:none; 
    outline: none; 
    vertical-align: baseline}  
ol, ul { 
    list-style: none} 
 
/*--------------------GLOBAL-----------------------------*/ 
html{ 
    width:100%; 
    height:100%}     
body { 
    width:100%; 
    height:100%; 
    color:#6c3f3f; 
    background:#ece8e7 url(http://dummyimage.com/300x200/ddd/eee.jpg&text=fond_body) repeat-x; 
    font-family:Helvetica, Futura, Arial, Verdana;  
    font-size:0.65em} 
#central{ 
    width:900px; 
    margin:0 auto;
    min-height:100%;
    background:url(http://dummyimage.com/192x50/456/567.jpg&text=fd_col) repeat-y; } 
#contenu {
    overflow;hidden;
    zoom:1;
}
     
/*--------------------BANDO-----------------------------*/ 
#bando{ 
    float:left; 
    width:192px; 
    height:100%; 
    padding:0 8px 0 0; 
}

et un html 
        <div id="central"> 
              <div id="bando"> 
                Contenu du bando. 
             </div> 
             <div id="contenu">
	           contenu decallé du flottant
	     </div>
        </div>


Quand IE7 et 6 ne casseront plus les pieds des uns et des autres , display:table et table-cell faciliteront ce type de mise en forme.

gc

<edit , la reprise css utilise http://dummyimage.com/ pour que chacun puisse tester sans avoir besoin de fournir les images de ton projet. </>
Modifié par gc-nomade (22 Mar 2011 - 18:40)
Sujet clos
Aller à