28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème avec "min-height: 100%"

Bonjour,

J'utilise le code suivant (code de démo pour illustrer le problème)

HTML :

<body>
	<div id="blocRouge">
		<div id="blocBleu">
		</div>
	</div>
</body>


Avec le CSS suivant :

html
{
	height: 100%;
}

body
{
	background-color: rgb(238, 238, 238);
	margin: 0;
	padding: 0;
	height: 100%;
}

#blocRouge
{
	margin: 0;
	padding: 0;
	min-height: 100%;
	background-color: red;
}

#blocBleu
{
	margin: 0;
	padding: 0;
	min-height: 100%;
	background-color: blue;
}


Je m'attends à ce que le div "blocBleu" recouvre entièrement le div "blocRouge" - et par conséquent occupe toute la page.
Or c'est le div "blocRouge" qui recouvre tout l'écran ! Smiley eek

Quelqu'un peut il m'expliquer pourquoi "blocBleu" ne recouvre pas "blocRouge", alors qu'il comporte un "min-height: 100%". Il devrait donc "hériter" de la hauteur de son bloc parent, non ?

NB : testé avec FireFox 28.0
Modifié par jcfe (24 Apr 2014 - 01:32)
salut,
quand on utilise "min-height" en poucent il se réfère à la valeur explicite du "height" du parent. Or dans ton cas, aucun "height" n'est spécifié et la valeur rendue est "0".
Donc pour pouvoir l'utiliser, il faut passer un "height:100%" au bloc rouge.
Sujet clos
Aller à