28173 sujets

CSS et mise en forme, CSS3

Height : 100% -> PB sous FIREFOX ?!

Bonjour a tous,

je cherche depuis + de 12h, et ai lu des dixaine de page, mais je ne comprend toujours pas ?!

je souhaite faire une interface ayant height a 100% de l'écran
avec une entête et un pied de page
cela fonctionne bien sous IE mais pas sous FF.

Voici mon code .

Merci de votre aide.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0"?>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body {
	margin: 0;
	padding: 0;
	height: 100%
}

div.haut{
	background-color: blue;
	height:3%;
}

div.contenu {
	height: 94%;
}

div.page{
	height: 100% ;
	background-color: green;
}

div.pied{
	background-color: red;
	height:3%;
}

-->
</style>
</head>
<body>

<div class="haut"><b>HAUT DE PAGE !!!</b></div>

<div class="contenu">
	<div class="page">
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	ligne <br />
	</div>
</div>
<div class="pied"><b>BAS DE PAGE !!</b></div>

</body>
</html>
Administrateur
Hello et bienvenue,

Attention : "height" n'est pas similaire à "min-height".
Height définit la hauteur du bloc. Elle n'est pas variable, c'est à dire que si le contenu de ce bloc dépasse cette hauteur, il va s'afficher en-dehors du bloc sans l'étirer.
IE buggue avec cette propriété : il étire le bloc alors qu'il ne devrait pas.
Merci pour cette info, cependant j'ai essayé

ceci et le probléme reste entier ?!
quelle serait la solution ?? merci de ton aide ...

<!--
html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	height: 100%;
}

div.haut{
	background-color: blue;
	height:3%;
}

div.contenu {
	min-height: 100%;
	height: 100%;
}

div.page{
	min-height: 100%;
	height: 100%;
	background-color: green;
}

div.pied{
	background-color: red;
	height:3%;
}
-->



et ceci 


<!--
html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

div.haut{
	background-color: blue;
	height:3%;
}

div.contenu {
	min-height: 100%;
}

div.page{
	min-height: 100%;
	background-color: green;
}

div.pied{
	background-color: red;
	height:3%;
}
-->
La solution serait-elle celle-ci (que je sache si je suis dans la bonne direction ??!

Merci

<!--
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
}

div.haut{
	background-color: blue;
	height:3%;
}

div.contenu {
	min-height: 94%;
	position: relative;
	background-color: green;
}

div.page{
	min-height: 94%;
	height: 94%;
	position: relative;
}

div.pied{
	background-color: red;
	height:3%;
}
-->
Sujet clos
Aller à