28172 sujets

CSS et mise en forme, CSS3

Divs imbriqués avec min-height 100%

Bonjour,

Après avoir longuement cherché une solution sur le net et dans le forum Alsacréations, je n'ai pas trouvé de technique permettant de réaliser ce que je souhaite.

Mon objectif est d'imbriquer des "div" avec pour chaque un "min-height" à 100% afin qu'ils prennent toute la hauteur de page par defaut et de pouvoir y associer entre autre un background différent à chacun (et les superposer).

le code principal ressemble à ceci :


<html lang="fr-fr" dir="ltr" xml:lang="fr-fr" xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="1">
<head>
<body>
<div id="globalWrapper">
<div id="contentWrapper">
CONTENU VARIABLE ICI
</div>
</div>
</body>
</html>


et le code CSS associé :

HTML, BODY, FORM, FIELDSET {
	margin: 0;
	padding: 0;
}
HTML {
	height: 100%;

}
BODY {
	height: 100%;
	background-color: #652D90;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
}
#globalWrapper {
	min-height: 100%;
	background: url(../images/fondSite.jpg) top center no-repeat;
	background-color: #2D0649;
	width: 955px;
	margin: 0 auto;
	border-left: 1px solid white;
	border-right: 1px solid white;
}
#contentWrapper {
	min-height: 100%;
	margin: 0 60px;
}


J'ai donc appliqué une hauteur explicite de 100% aux balises HTML et BODY.

Pour le div "globalWrapper", le min-height de 100% fonctionne bien (il se réfère aux parents), c'est à dire que le div s'étend bien (avec le background) lorsque le CONTENU VARIABLE dépasse la hauteur de page par défaut (et si le contenu ne dépasse pas, il s'adapte bien à 100% de la fenêtre en hauteur malgré tout).

Mais pour le div enfant "contentWrapper" par contre cela n'est pas le cas, le min-height 100% ne fonctionne pas, par défaut il s'adapte uniquement à la taille (hauteur) de son contenu. Je suppose que cela est du au fait que son parent "globalWrapper" possède uniquement un min-height, et non de height explicite....? ce min-height ne peut donc t'il pas hériter de son parent ?

J'ai cherché tout un tas de solutions avec des "height: auto;" explicites, positionnements absolus,...mais rien n'y fait.

Merci de vos éclaircissements ou toutes solutions afin d'imbriquer des div de cette façon...
Modifié par thorinthedwarf (16 Mar 2012 - 17:15)
Salut salut,

En soirée comme ça, la première idée qui me vient :

sur ton #globalWrapper tu ajoutes :
position:relative;


sur ton #contentWrapper tu ajoutes :
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;

Et ça fonctionne ! Mais bon, ça dépend un peu de l'utilisation que tu en fais, car c'est plutôt crado là, mais vu que tu as dis que tu avais essayé en absolute je me suis permis.

Sinon je repasserai le cerveau plus frais pour une solution plus propre si ça ne te convient pas.

Edit: oublié de dire deux remarques Smiley langue

La définition de police n'est pas cohérence, pourquoi mettre Helvetica en deuxième ? elle ne sera jamais affiché, sur windows elle n'est pas dispo et sur mac les deux le sont, forcément il n'y aura qu'Arial affiché dans les deux cas. Donc il faut mettre Helvetica avant Arial dans la déclaration ou supprimé Helvetica Smiley langue (pour être cohérent).

Pourquoi les noms des éléments sont en majuscule dans le CSS ?
Modifié par Gili (17 Mar 2012 - 00:35)
Bonjour,

J'ai testé les 2 propositions de solutions ci-dessus, mais cela ne fonctionne pas.

1/ les "display: block", j'ai testé et je pense qu'on oublie parce que mes divs sont déja des "blocs" à la base...

2/ le positionnement "absolu", j'avais déja testé, le problème c'est qu'en mettant le 2eme bloc en absolu, dans le cas où la page dépasse la hauteur de l'écran (donc avec ascenceur), le bloc parent "globalWrapper" ne s'agrandit donc pas en même temps puisce que le 2eme bloc est sorti du flux (absolu)...

J'ai limpression qu'il n'y a pas vraiment de solution alternative, je continue à chercher...
Modifié par thorinthedwarf (19 Mar 2012 - 15:35)
Bonjour,

non, le min-height ne transmet aucune valeur et ne peut heriter que d'un height defini.

Ce que tu peut par contre faire, c'est formater tes deux div en display:table et table-cell.

Ce qui donnerait de base:
 html, body, #globalWrapper {height:100%;}
#globalWrapper {display:table; /* width:xx; */ border-spacing:0;}
#contentWrapper {display:table-cell;}


La logique(display) veut que la cellule(table-cell) s'adapte au tableau(table) en height:100%; puis que le tableau s'adapte a la cellule si celle-ci s'etend au dela des 100% initiaux. Cela fonctionne dans IE8 et +. Cet avantage a aussi un defaut, si le contenu est important , le div formater en tableau peut s’élargir pour s'adapter a son contenu tant en largeur qu'en hauteur Smiley smile .

Cordialement,
GC.
Sujet clos
Aller à