Min-height:100% ne marche pas

Question

macspyre

19 Oct 2006 à 19:04

Bonjour,

Dans Firefox, pour ce site de démonstration je rencontre un problème sur la rubrique Produits -> Legal.

La div contener est paramétrée pour occuper 100% de la hauteur de la fenetre, et elle le fait bien, mais si la page est plus grande que la fenetre, le div ne fera que 100% de la fenetre et non pas de la page.

Ma question : comment forcer la hauteur de cette div pour contenir le texte.

PS: faut aller voir pour comprendre. N'hésitez pas Smiley cligne

Merci pour votre aide

Raphael

Administrateur

19 Oct 2006 à 20:19

macspyre a écrit :
mais si la page est plus grande que la fenetre, le div ne fera que 100% de la fenetre et non pas de la page.

Hello et bienvenue,

Effectivement, il est bon de rappeler que le media Web n'est pas paginé comme l'est le media Print par exemple.
Le principe du web ne fonctionne pas sur le concept de pages, puisque l'on pense en terme de résolution : lorsque le contenu déborde de la fenêtre, il existe l'ascenseur de scroll.

Il faut parfois se contraindre aux réalités du média et ne pas vouloir copier d'autres médias, sous peine de grosses complications Smiley smile

gcyrillus

Modérateur

19 Oct 2006 à 20:35

bonjour,

en enlevant les positions absolute ,repassant en float certaine "zones" , se defaire des repositionement en relatif et en usant d'un veritable min-height:100%; pour FF et les autres et en passant le height:100% en commentaires conditionnels por IE et inferieur , l'affichage va se comporter comme prevue (et la/les barres de defilements referont leur apparition si besoin).
la faq "#60" donne la façon de faire le min-height, pour le reste , reprendre quasiment le css a partir de zero et eviter de bidouiller/rafistoler le code deja fait et qui bug.
A mon avis la mise en page<edit> --> "mise en forme" </edit> ne devrait pas necessiter de position:absolute .....
il faut d'abord suivre le flux du code , a propos , la page est elle coherente a la lecture sans style appliqués ? et sans javascript ?
++
Modifié par gcyrillus (19 Oct 2006 - 21:06)

macspyre

19 Oct 2006 à 20:45

Merci à tous les deux pour vos réponses.

Raphael,
Je ne cherche pas à adapter mon contenu à mon média, mais bien le contraire.
Pour rappel, je ne cherche pas à masquer l'ascenseur, mais adapter le gabarit lorsque cela est nécessaire.

gcyrillus,
Je vais reprendre ma CSS de zéro en utilisant des floats et sans utiliser d'absolute.

Si je décompose mon code au strict minimum et avec des floats, j'ai toujours le meme problème.


<!DOCTYPE html PUBLIC "-//W3C//divD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/divD/xhtml1-transitional.divd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link href="velozone.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contener">
    <div id="texte"></div>
    <div id="spacer">&nbsp;</div>
</div>
</body>
</html>


html, body { height: 100%; }
#contener {
	width: 900px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	background: url(images/fond.png);
}
#texte {
	float: left;
	width: 200px;
	margin: 0 0 0 50px;
}
#spacer { clear: both; }

Le tout est visible ici
J'accepte le coup de main avec plaisir, ca fait 4 heures que je bloque dessus, et si je peux éviter de faire un tableau, ce serait cool ! Smiley langue

Modifié par macspyre (19 Oct 2006 - 21:07)

Raphael

Administrateur

19 Oct 2006 à 21:03

macspyre a écrit :
Je ne cherche pas à adapter mon contenu à mon média, mais bien le contraire.

Oui c'est bien ce que j'ai compris : tu voudrais adapter le média à ton contenu.
Or ce n'est pas la bonne vision des choses : il faut justement s'adapter au média choisi. Ici nous parlons d'un média sur lequel le terme de "page" ne s'applique pas.

macspyre

19 Oct 2006 à 21:08

Merci pour la précision Raph,
Tu as effectivement raison, ne parlons pas de page. Le terme est particulièrement inadapté.

gcyrillus

Modérateur

20 Oct 2006 à 23:32

bonjour,

le sujet est-il toujours d'actualitée ?
min-height:100% n'est ce pas ?

si oui , cette reprise de ton code (en y ajoutant un pied de page au minimum a 100% du bas de l'ecran) peut peut-etre de sevir de base ou plutot d'exemple pour un rendu "ecran" .

:)

<!DOCTYPE html PUBLIC "-//W3C//divD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/divD/xhtml1-transitional.divd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Page test</title>
<style type='text/css'>
h1 {margin:0;text-align:center;}
html { 
	height:100%;
}
body { 
	height:100%;
	background:#777;
	margin:0;
	padding:0;
	overflow:visible;
}
#contener {
	width: 900px;
/* les 2 lignes suivantes pour le min-height dans IE6 et ff , a sortir en CC pour filtrer IE7 */
	min-height: 100%;
	_height:100%;

/* centrage en dtd valide */
	margin-left: auto;
	margin-right: auto;
	background:#eee url(images/fond.png);
/* ajout du position:relative; pour mettre le sapcer en footer bas de page  */
	position:relative;
}
#texte {
	float: left;
	height:200px; /*pour visualiser si vide de contenu  dans ff  , test*/
	display:inline;/* annihile le bug de double marge dans IE */
	width: 200px;
	margin: 0 0 0 50px;
	background:#aaa;
	bottom:0;
	top:0;
	border-bottom:3px solid yellow; /* pour test visuel */
}
#contener p {
	margin: 0 5px 0 255px; 
	border:#333 solid ;
}
#contener div p {
	margin: 2px 5px ; 
	color:yellow;
}
#spacer { 
	clear: both;
	background:#666; 
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:30px;
}

#contener p.spacer { 
	clear:left;
	height:auto;
	font-size:30px;
	height:30px;
	border:0;margin:0;
}
</style>
</head><body>
<div id="contener">
<h1>test de mise en forme</h1>
	<div id="texte">
	<p>float-left en marge a 50px</p>
	</div>
		<p> <- Bordure jaune sur le flottant pour tester le pied de page et le ".spacer"</p>
		<p class="spacer">
		<!-- passe sous le flottant et assure une marge pour ne pas laisser le contenu passer 

sous le pied -->
		</p>
<div id="spacer"><p>Ton spacer qui pourrait faire  office de pied de page sur cette exemple</p></div>
</div>
</body>
</html>

++

macspyre

20 Oct 2006 à 23:49

Salut gcyrillus,

J'ai repris le problème de zéro, en conservant en mémoire qu'il n'y a pas de notion de pages en HTML.

J'ai terminé aujourd'hui un modèle fonctionnel sous Firefox à grand renfort de javascript. Exemple
Si j'en suis arrivé à utiliser JS, c'est bien que j'ai n'ai trouvé AUCUNE solution pure CSS Smiley decu

Il me reste encore à y intégrer le menu de navigation définitif, et le rendre ce layout compatible Safari (qui, au passage, ne connait pas getComputedStyle. Si qq un connait une astuce...).

Je vous livre ici le code :

HTML


<div id="contener">
    <div id="navy"></div>
    <div id="CENTRALE" name="CENTRALE"></div>
</div>

CSS


* {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	height: 100%;
}

body {
	font: 12px "Lucida Grande", Arial, sans-serif;
	color: #646464;
	background: #EAEAEA;
}

#contener {
	width: 900px;
	min-height: 100%;
	margin: 0 auto;
	background: url(images/fond.gif);
}

#navy {
	float: right;
	margin: 0 27px 0 0;
	padding: 325px 0 0 0;
	width: 282px;
	background: no-repeat url(images/notredame.jpg);
}

#CENTRALE {
	width: 516px;
	margin-left: 36px;
	padding: 350px 20px 20px 20px;
	text-align: justify;
	background: no-repeat url(images/velozone.jpg);
}

JS


function getStyle(elt,pro) {
	var element = document.getElementById(elt);
	if (window.getComputedStyle) { // Mozilla Firefox & cie
		var propriete = window.getComputedStyle(element,null).getPropertyValue(pro);
	}
	else if (element.currentStyle) { // Microsoft Internet Explorer
		// Formatage (IE) de la propriété CSS
		while (pro.indexOf('-') != -1) {
			var lettresuivtiret = pro.charAt(pro.indexOf('-')+1);
			pro = pro.replace(/-\S{1}/,lettresuivtiret.toUpperCase());
		}
		var propriete = eval('element.currentStyle.' + pro);
	}

	return propriete;
}

function updateHeight() {
	var contenerDiv = document.getElementById("contener");
	var navyDiv = document.getElementById("navy");
	var centraleDiv = document.getElementById("CENTRALE");

	if ( contenerDiv != null && centraleDiv != null ) {
		var contenerDivH = contenerDiv.offsetHeight;
		var navyDivH = navyDiv.offsetHeight;
		var navyDivPT = getStyle("navy","padding-top");
		var navyDivPB = getStyle("navy","padding-bottom");
		var navyDivPadding = parseInt(navyDivPT) + parseInt(navyDivPB);

		if ( contenerDivH != navyDivH ) {
			navyDiv.style.height = (contenerDivH - navyDivPadding) + "px";
		}
	}
}

gcyrillus

Modérateur

21 Oct 2006 à 00:56

re bonsoir,

il y a des choses a enlever dans le "html" :

<div id="CENTRALE" name="CENTRALE">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Stephan Obadia, Gregory Siebert">
<meta http-equiv="Content-Language" content="fr">
<meta name="Description" content="VELOZONE">
<meta name="Keywords" content="coursiers à vélo marseille">
<meta http-equiv="robots" content="all">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="5 days"><title>présentation</title>


<link href="style.css" rel="stylesheet" type="text/css">

on trouve ça dans la div centrale Smiley smile

.

ensuite en plaçant les fond dans d'autre elemnt , en passant des marge interne en marges externes sur d'autre element , il devient plus facile de gerer les hauteurs , .. en pourcentage , enfin , c'est ma façon d'avoir vu le truc aujourd'hui.

en editant la page en local et sans javascript j'obtient , du moins je crois , le rendu que tu recherches:
le css .



* {
	margin: 0;
	padding: 0;
	border: 0;
}

html , body {
	height: 100%;
}

body {
	font: 12px "Lucida Grande", Arial, sans-serif;
	color: #646464;
	background: #EAEAEA url(fond.gif) repeat-y center center;
}

#contener {
	width: 900px;

	margin: 0 auto;
	background: url(notredame.jpg) no-repeat 592px top;
min-height:100%;
_height:100%;
}

#navy {
	float: right;
	margin:0;
height:100%;
	width: 282px;
	/*background: no-repeat url(notredame.jpg);*/
position:relative;
left:-27px;

}
#arbre {margin-top:325px;}

#CENTRALE {
	width: 516px;
	margin-left: 36px;
	padding: 0 20px 0px 20px;
	text-align: justify;
	background: no-repeat url(velozone.jpg);
min-height:100%;
_height:100%;

}
#text {padding-top:350px;}

et les balises vides de la page telecharger:

<body>
	<div id="contener">
		<div  id="navy">
			<div id="arbre">

			</div>
		</div>
		<div id="CENTRALE" name="CENTRALE">

 <div id="text">
   <div id="titre">VELOZONE SARL au capital de , crée en Avril 2006(   di a mettre en hn)</div>
   <p>textes</p>
</div>

               </div>
</div>
</body></html>

j'ai editer ça en local et sans javascript actif.
bonsoir
Modifié par gcyrillus (21 Oct 2006 - 00:58)

macspyre

21 Oct 2006 à 14:22

Salut Gcyrillus,

J'ai nettoyé les fichiers inclus qui faisaient que les balises html étaient doublées.
Merci, je les avait oubliées.

Mis à part ça, ta CSS marche à la perfection !
Je l'ai installée ici si tu veux voir

Plus besoin de JS pour adapter les colonnes.
Nickel sur Firefox et Safari. Je n'ai pas encore d'IE 7 pour vérifier.

En tout cas, tu es un chef !
Merci pour tes lumières, il faut de la persévérance lorsque l'on sort de la vieille école des tables pour maîtriser les CSS ! Mais quel pied une fois que l'on y a pris goût Smiley cligne

gcyrillus

Modérateur

21 Oct 2006 à 15:07

bonjour,

sous ma version "stand alone" de IE7 ça passe bien .

Bonne continuation Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Min-height:100% ne marche pas