28172 sujets

CSS et mise en forme, CSS3

[Résolu] Height 100% ?

Bonjour pouvez vous m'aider ?

J'ai mis un space between mais le conteneur pink ne va en haut.
Et après avoir utiliser une position relative et absolute anssi que un height à 100% , mon article yellow ne prend pas 100% de son parent pink.


<header>
			<section id="s1h">
				<article id="a1h">
					<p>article1</p>
				</article>
			</section>
			<section id="s2h">
				<p>section2header</p>
			</section>
		</header>



body{
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

		
		/* Header */

header{
	background-color: black;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 10%
}

#s1h{
	background-color: pink;
	padding-top: 2%;
	display: flex;
	justify-content: center;
	position: relative;
}

#s2h{
	background-color: purple;
}

#a1h{
	background-color: yellow;
	height: 100%;
	position: absolute;
}
Voici le nouveau code qui marche . J'ai remplacer le padding-top de s1h et du header par un height . 


header{
	background-color: black;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 30%;
}

#s1h{
	background-color: pink;
	height: 10vh;
	display: flex;
	justify-content: center;
	position: relative;

}

#s2h{
	background-color: purple;
}

#a1h{
	background-color: yellow;
	height: 100%;
	position: absolute;

}



Cela marche sans les positon relative et absolute , mais peut être que c'est plus propre de les mettre ?
Administrateur
freeeeezi a écrit :

donc il faudrait j'utilise un minimum-height 100% ?

Non, min-height ou height revient au même si l'unité est en pourcentage.
Sujet clos
Aller à