5568 sujets

Sémantique web et HTML

Problème de div hauteur pour remplir la page

Bonjour à tous,
Hier soir j'ai créé rapidement un squelete de site internet, pour me faire une page de présentation, tout marchait très bien (mis à part quelques problèmes de décalage de position entre FF , IE et Opera, mais bon j'ai apercu un tutoriel la dessus ici donc la n'est pas le problème)

Le problème est que aujourd'hui mystérieusement l'affichage a changé... alors que bon depuis hier soir je n'ai pas touché au code vu que je dormais... assez étrange certes mais le pire c'est que le code n'a pas changé, et que je n'arrive pas à trouver un code pour recréer l'affichage originel.

Le site en question :
http://niluge-kiwi.ovh.org/
Hier soir le contenu principal (<div id="content_center">) s'agrandissait pour remplir toute la page, et là ce n'est plus le cas, et pas moyen de réussir à faire ca.

Donc pourriez vous m'aider à trouver une solution pour que la <div id="content_center"> soit assez grande en hauteur pour remplir toute la page au moins?

Merci d'avance
C'est un sujet assez compliqué. Une page web est un média non paginé, pas prévu pour prendre en compte la hauteur de la zone d'affichage de la fenêtre du navigateur. La largeur est prise en compte (pour les retours à la ligne), mais la hauteur c'est une autre paire de manches.

Tu peux définir html et body en height: 100%;, et faire un bloc conteneur en min-height: 100%;. Ensuite, placer le footer en positionnement absolu et avec un bottom: 0;, faire attention aux fusions de marges pour éviter d'avoir une barre de défilement vertical inutile, s'occuper du cas du min-height non géré dans IE, tout ça.

Il y a pas mal de messages dans le forum qui traitent de ce sujet. Je te laisse faire une petite recherche ici ou ailleurs. Smiley cligne
Bonsoir, merci de ta réponse Smiley smile

J'ai déjà cherché hier pendant au moins un heure ici et autrepart, sans succes.
Concernant le footer en absolute j'avais testé aussi, mais pas avec une div conteneur en min-height.

Bref j'ai testé et ca ne change rien, à part que le footer est en bas.

Le truc étrange dans l'histoire c'est que avant hier soir ca marchait parfaitement, je ne sais pas par quel miracle, et ce sur FF, IE, et Opera!
Eh bien, j'ai écrit un article au sujet d'une table de CSS entrée en javascript. Ça peut paraître bizarre mais à toi,ça te permettrait justement de déterminer un certain pourcentage de hauteur pour ta div "content_center" et de l'entrer dans la table. Remarques, tu peux aussi l'entrer en script simple...
Je te mets ici l'article d'origine que j'avais fait, tu verras les exemples et comment il faut entrer les variables.

<html>
<head>
<script type="text/javascript">
/* ----- taille écran ------------ */
lrgec = screen.availWidth;
htec = screen.availHeight;
id0 = "div2";
id1 = "div3";
id = id0;
/* ----------- taille de la div ------- */
lrg0 = 600;
ht0 = 350;
/* ------------- position ------------ */
poshrt = (lrgec - lrg0)/2;
/* ------------------ Je remonte ci-dessous la div de 50 pour la mettre au milieu, sinon c'est correct en fullscreen --------------*/
posvrt = (htec - ht0)/2 -50;
/*------------------------- écriture de la table --------------------------- */
document.write("<style id='st0' type='text/css'>");
/* -------------------- on écrit les variables js par "+ variable +"--------------------*/
document.write("#div0 {position:absolute; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/* --------je modifie les valeurs des positions et tailles ----------*/
posvrt= posvrt+30;
ht0 = ht0-60;
poshrt = poshrt+30;
lrg0 = lrg0-60;
document.write("#div1 {position:absolute; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/*---------------- div2 var id0 en relative affichée----------------------------*/
posvrt= +20;
ht0 = ht0-80;
poshrt = +25;
lrg0 = lrg0-60;
document.write("#"+id0+" {position:relative; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
/*---------------- div3 var id1 en relative non affichée----------------------------*/
posvrt= +60;
ht0 = ht0+80;
poshrt = +55;
lrg0 = lrg0+60;
document.write("#"+id1+" {position:relative; top:"+ posvrt +"px; left:"+ poshrt +"px;padding:5px;width:"+ lrg0 +"px;height:"+ ht0 +";border:3px solid darkblue;font-size:14px;color: darkblue;}");
document.write("</style>");
</script>
</head>
<body>
<div id="div0" onmouseover="posvrt=posvrt-30;this.id='div1';">Exemple de div paramètrée en table de css écrite en javascript.</div>
<div id="div1">Exemple de 2ème div dont les positions ont été augmentées de 30px et les dimentions diminuées de 60px.
<div id="div2" onMouseOver="this.id='div3';" onMouseOut="this.id='div2';">
Exemple de 3ème div dont les positions ont été augmentées, en relative, avec une id en variable, </div>
</div>
</body>
</html>

Quelques bricoles et essais sont dessus, je les laisse, ça peut donner des id(ées), mais le principal est dans le document.write de la table de css
Bonjour, merci pour ta réponse Deny.

Donc j'ai regardé rapidement ton javascript :
En fait il utilise
screen.availWidth;
screen.availHeight;

Pour créer les hauteurs requises, j'en déduit que ces propriétés n'existent pas en css.
Pourtant 100% du body ca correspond bien à ces valeurs.

Donc la question, peut on faire des opérations mathématiques sur les longueur et largeur en css, en mélangeant les unités?
ce que je souhaite faire :
100% - 190px par exemple, comme ca je peux mettre en hauteur min 100% - le header et le footer.
Niluge_KiWi a écrit :
Donc la question, peut on faire des opérations mathématiques sur les longueur et largeur en css, en mélangeant les unités?
ce que je souhaite faire :
100% - 190px par exemple, comme ca je peux mettre en hauteur min 100% - le header et le footer.

Non, c'est tout bonnement impossible.
Sinon, il y a moyens de faire ce que tu veux en HTML+CSS, à partir du moment où tu disposes d'un bloc conteneur pour toute la page, directement après body et englobant tout le contenu. C'est ce bloc que tu mets alors en min_height: 100%;, et qui aura la couleur ou l'image de fond à afficher. Le bloc de contenu central peut alors très bien ne pas prendre toute la hauteur.

Bref, il faut ruser un peu. Et maîtriser les height, min-height, gestion du min-height dans Internet Explorer, pied de page positionné en absolu, et pour finir la gestion de la fusion des marges.
Ce n'est pas de tout repos.
Ok.

J'ai encore bcp à apprendre, mais ca viendra.
Merci pour l'aide!

Par contre je n'ai vraiment pas rêvé, ca fonctionnait parfaitement la 1ere fois!
Smiley biggol
On peut aussi faire ce que tu demandes Niluge, mais pas en css, en script.
100%, c'est le screen.availHeight ou width
Un script ci-dessous à mettre à l'endroit ou tu dois écrire ton conteneur.
<script type="text/javascript">
lrgec = screen.availWidth;
htec = screen.availHeight;
hconteneur = htec - 190;
document.write("<div width=' "+ lrgec +" ' height=' "+ hconteneur +" '>");
</script>

J'ai mis un espace entre les guillemets et apostrophes pour bien les différencier, mais ce n'est pas nécessaire.
En fait, c'est un peu la même chose que pour la page de CSS, sauf que là on n'applique ce calcul qu'à une seule ligne d'HTML.
Le document.write permet en js d'introduire des variables dans une ligne d'HTML.
Modifié par Deny (21 Jul 2006 - 11:05)
Oui, je connais javascript (enfin plus ou moins, mais je connais les bases).
En effet ca serait une solution, le problème de ta méthode est qu'elle écrit le style dans la page html, donc ce n'est plus valide XHTML.

Une solution de contournement serait ceci: (toujours en utilisant javascript) 

<script type="text/javascript">
	htec = screen.availHeight;
	hconteneur = htec - 190;
	document.getElementById('content_center').style.height.value = hconteneur;
</script>


Ca m'a l'air plus propre!

Je vais essayer ceci.

EDIT : bon après quelques tests ca n'a pas l'air de fonctionner.
Et après réflection il faudrait plutôt mettre min-height car sinon ca poserait des problèmes si le texte est trop grand, et la problème, si je met le tiret, l'interprétateur javascript croit que c'est un signe moins, et il l'aime pas à cet endroit !

Bref je crois que je vais tenter la méthode avec document.write!


EDIT2: La méthode document.write ne fonctionne pas nonplus..., ca crée bien une div avec la bonne hauteur, mais c'est pas pris en compte par le navigateur apparemment...

EDIT3: J'ai testé en utilisant document.write, mais en écrivant un style : 


<script type="text/javascript">

htec = screen.availHeight;
hconteneur = htec - 227;
alert(htec);
document.write("<div id='content_center' style='height:"+ hconteneur +"px;'>");

</script>

(la feuille de style définissant déjà la largeur)

Et bien la c'est bien pris en compte par le navigateur, sauf que problème, availHeight renvoie une mauvaise valeur : chez moi 770px, alors que la surface d'affichage fait 585px...
Alors ca pose problème pcq vu ce que j'ai pu lire sur le net, availHeight devrait bien être sensé renvoyer la surface d'affichage disponible...
Bon il ne me reste plus qu'à tester uen autre bidouille, à mettre en fond le truc noir, après mettre 2 colonnes en float left et right... je vais essayer ca.

EDIT4 : En fait la technique des colonnes ne fonctionne que si ce sont des colonnes à largeur fixe connue, hors ce n'est pas le cas ici.

Bref je crois que je n'ai plus qu'à abandonner... Smiley sweatdrop
Modifié par Niluge_KiWi (21 Jul 2006 - 16:55)
Tout à fait par hasard, je suis tombé sur un code javascript qui récupère la surface d'affichage effective, pour différents navigateurs :

if ( typeof( window.innerWidth ) == 'number' )
{
	//----------------------------------
	// Non IE
	//----------------------------------
	my_height = window.innerHeight;
}
else if ( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
{
	//----------------------------------
	// IE 6+
	//----------------------------------
	my_height = document.documentElement.clientHeight;
}
else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )
{
	//----------------------------------
	// Old IE
	//----------------------------------
	my_height = document.body.clientHeight;
}


Bon le problème est que sous firefox ca retourne 612px au lieu de 585, mais bon c'est mieux que 770 Smiley lol .
Bref j'ai ajusté le nombre à soustraire et ca marche sous firefox(normal j'ai ajusté pour lui), mais ce qui est bien, c'est que ca marche aussi sous Opera!

Par contre sous IE ca merde complètement, déjà le footer est mal positionné : en largeur il commence au milieu de la page, et puis le margin-bottom: 0 n'a pas l'air de prendre en compte l'ascensseur horizontale (qui est là à cause du pb avec le footer)

Bref ca marche sur les bons navigateurs...
Sujet clos
Aller à