CSS hauteur 100%

CSS hauteur 100% - Web design - Graphisme

Marsh Posté le 22-03-2004 à 20:00:38    

Le css est un superbe outil de présentation web. A condition que celui-ci soit maîtrisé...
 
Je me posais donc la question (qui pour le moment n'a pas de réponses), celle de trouver une astuce pour permettre l'affichage de <div> à 100% de hauteur...
 
Je m'explique... Quand on crée un style #div1{ height:100%; } on obtient pas les 100% de hauteur en fournissant le code html : <div id="div1>contenu</div> (sous ie notament)... Ca marche trés bien pour les largeurs...Mais pas les hauteurs... (ca fonctionne si on utilise pas des valeurs en % mais en pixels...)
 
On utilise donc un conteneur, quand on veut placer plusieurs <div> l'un à côté de l'autre... mais leur hauteurs ne sont pas homogéne pour peu que le style soit defini comme ceci :  
#div1{  
height:100%;
float:right; background-color: #EEEEEE;  
}

L'attribut float servant à placer les div l'un à coté de l'autre dans le conteneur...
 
soit en html :
<div> <- Conteneur
<div id="div1>contenu1</div>
<div id="div1>contenu2</div>
<div id="div1>contenu3</div>
</div>

 
Donc je propose (si quelqu'un veut bien) qu'on puisse trouver une solution... J'ai testé différentes méthodes. Les hauteurs en pixels marchent trés bien, mais on ne maîtrise alors plus le contenu. C'est à dire qu'on ne peut pas créer de style div1 qui fonctionne de maniére général... Car on peut avoir des contenus trés long et d'autres plus court...

Reply

Marsh Posté le 22-03-2004 à 20:00:38   

Reply

Marsh Posté le 22-03-2004 à 20:03:21    

ca va sur prog plutot ca nan ?


---------------
icite ca shoot : albphoto.fr   //   la ca bricole : albworkshop.fr  //  A VENDRE Canon ST-E2
Reply

Marsh Posté le 22-03-2004 à 20:16:54    

oui et non... Car le CSS n'est pas un language tel que le php avec des boucles ou autre... c'est plutôt un outils de présentation graphique sous forme de programmation.
 
Si je post ici et pas dans programmation, c'est que ce sujet interesse plus le designer que le programmeur pur, car le css à pour but de complétement dissocier le code de la forme


Message édité par Pyksel le 22-03-2004 à 20:17:28
Reply

Marsh Posté le 22-03-2004 à 20:26:43    

pyksel a écrit :

Le css est un superbe outil de présentation web. A condition que celui-ci soit maîtrisé...
 
Je me posais donc la question (qui pour le moment n'a pas de réponses), celle de trouver une astuce pour permettre l'affichage de <div> à 100% de hauteur...
 
Je m'explique... Quand on crée un style #div1{ height:100%; } on obtient pas les 100% de hauteur en fournissant le code html : <div id="div1>contenu</div> (sous ie notament)... Ca marche trés bien pour les largeurs...Mais pas les hauteurs... (ca fonctionne si on utilise pas des valeurs en % mais en pixels...)
 
On utilise donc un conteneur, quand on veut placer plusieurs <div> l'un à côté de l'autre... mais leur hauteurs ne sont pas homogéne pour peu que le style soit defini comme ceci :  
#div1{  
height:100%;
float:right; background-color: #EEEEEE;  
}

L'attribut float servant à placer les div l'un à coté de l'autre dans le conteneur...
 
soit en html :
<div> <- Conteneur
<div id="div1">contenu1</div>
<div id="div1">contenu2</div>
<div id="div1">contenu3</div>
</div>

 
Donc je propose (si quelqu'un veut bien) qu'on puisse trouver une solution... J'ai testé différentes méthodes. Les hauteurs en pixels marchent trés bien, mais on ne maîtrise alors plus le contenu. C'est à dire qu'on ne peut pas créer de style div1 qui fonctionne de maniére général... Car on peut avoir des contenus trés long et d'autres plus court...


 
Juste pour embêtter le monde :D un id est unique :o
 
[:ddr555] Bon plus sérieusement, ça m'interesse aussi cette histoire [:huit]


Message édité par moazaaa le 22-03-2004 à 20:27:19
Reply

Marsh Posté le 22-03-2004 à 20:35:28    

oui : un id est unique, mais tu peux l'utiliser autant de fois que tu veux... ;) En fait tu le defini dans le style #div1 qui est ta definitaion. Pour l'emploi html tu utilise <div id="div1">


Message édité par Pyksel le 22-03-2004 à 20:35:48
Reply

Marsh Posté le 22-03-2004 à 21:19:03    

et ça valide de l'utiliser plusieurs fois? il me semble que le validateur avait fait la gueule la denière fois que j'ai fais ça : /

Reply

Marsh Posté le 22-03-2004 à 21:25:35    

le validateur fais la tronche si plusieurs objets ont le meme id.
un  ID est unique.
 
si c'est pour appliquer a plusieurs objets -> class


---------------
"Welcome to the soldier side, where there's no one here but me...."
Reply

Marsh Posté le 22-03-2004 à 23:26:45    

euh je veux aps faire mon relou mais les tableaux ne permettaient pas non plus l affichage height 100% comme tu l entends  
pour la bonne raison qu on ecrit de droite a gauche (edit : hihihi je laisse la coquille :D)et c est comme ca que ton navigateur va remplir les donnees et que le 100% width fonctionne
a 100% height il s arrete quand il n y a plus de donnees mais la longueur possible est infinie
c est ecrit dans un francais lamentable mais je pense vraiment que c est pas possible
(ca aurait peut etre deja été fait :D)


Message édité par VanessaUsedToLive le 22-03-2004 à 23:28:00
Reply

Marsh Posté le 23-03-2004 à 00:04:17    

Merci aeron, mattc et ceam, c'est ce que je voulais dire pour le validateur bien sûr :o  
 
:)

Reply

Marsh Posté le 23-03-2004 à 06:41:04    

Bon pour synthétiser, il n'est pas possible de créer des tableaux à 100% de hauteur... En fait si... http://www.pyksel.com
 
La partie blanche dans le degradé est un tableau html à 100% de hauteur...
 
le code commence ainsi :
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" class="bloc_principal">
<tr>
<td>

 
C'est ma class bloc_principal qui gére la hauteur... Ne regardez pas trop le code du html ni du css, y a pas mal de nettoyage à faire, d'autant plus que je remplace l'ensemble du contenu par des div... J'ai pu obtenir un div de 100% de haut, mais impossible de me souvenir comment. Là je recherche, j'avais pas noter tous les paramétres... Simplement ce dont je me souviens, c'est l'imbrication multible de div spéciaux dont certains sont des spacer... Si ca peut mettre sur la voie... Car je suis sûr qu'on peut y arriver...

Reply

Marsh Posté le 23-03-2004 à 06:41:04   

Reply

Marsh Posté le 23-03-2004 à 08:00:40    

si mes souvenirs sont bons, à peu près la même question a été soulevée dans le topic sur la faq css sur le forum programmation, je vais aller voir [:meganne]

Reply

Marsh Posté le 24-03-2004 à 11:51:43    

Reply

Marsh Posté le 26-03-2004 à 10:15:47    

il faut que html et/ou body ait une hauteur mise à 100% pour qu'un div ou une table puisse avoir une hauteur à 100% (vu que c'est une hauteur relative à leur conteneur, les éléments html et/ou body s'il sont au niveau le plus haut dans l'arborescence)


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 26-03-2004 à 15:43:20    

pyksel a écrit :

Bon pour synthétiser, il n'est pas possible de créer des tableaux à 100% de hauteur... En fait si... http://www.pyksel.com


 
en fait non ...
ca depasse chez moi sur mozilla en 1280*1024 si je suis pas en plein ecran (donc ca marche pas : un 100% width ne chipote pas)
et si c etait vraiment 100% height ca se redimensionnerait au fur et a mesure que je reduit la taille de ma fenetre ce qui n est pas le cas (ce qui arrive avec un 100% width)
c est plutot une taille fortuite due a la longueur de ton contenu
et je persiste a dire que si c etait possible on en aurait -par exemple- deja vu sur http://www.csszengarden.com/
 

Reply

Marsh Posté le 26-03-2004 à 19:18:31    

VanessaUsedT0Live a écrit :


 
en fait non ...
ca depasse chez moi sur mozilla en 1280*1024 si je suis pas en plein ecran (donc ca marche pas : un 100% width ne chipote pas)
et si c etait vraiment 100% height ca se redimensionnerait au fur et a mesure que je reduit la taille de ma fenetre ce qui n est pas le cas (ce qui arrive avec un 100% width)
c est plutot une taille fortuite due a la longueur de ton contenu
et je persiste a dire que si c etait possible on en aurait -par exemple- deja vu sur http://www.csszengarden.com/
 
 


 
Je neparle pas d'un 100% qui s'adapte à la taille navigateur -> ca oui, je sais que c'est pas encore possible :D , je parle d'un 100% d'un espace précis...

Reply

Marsh Posté le 26-03-2004 à 23:44:23    

ben 100% de quoi alors ?
tu dis que sur ton site tu y es arrivé ..
arrivé a quoi ?
 
je comprends pas  
 
par exemple sur ton site dans ta table du bas ...le div qui devrait etre conteneur ne fait pas 100%
c est de ca que tu parles ?
il faut utiliser la propriété clear
 

Citation :

<div id="Layer1" style="position:relative; width:100%; z-index:1" class="bloc1">
 
<div id="Layer2" style="position:relative; height:100%; z-index:2" class="bloc2">
<div><img src="images/puces/fleche.gif" width="28" height="18" class="texte"><span class="texte">Veuillez vous identifier</span></div>  
<span class="texte">Login : </span><span class="erreur"></span><br>
 
 <input name="user_login" type="text" value="" size="30" maxlength="30" class="form_text">
<br>
<br>
<span class="texte">Password : </span><span class="erreur"></span><br>
 <input name="user_mdp" type="password" value="" size="30" maxlength="30" class="form_text">
<br>
<br>
 <input name="name" type="submit" value="libelle" size="" maxlength="">
</div>
 
 
<div id="Layer3" style="position:relative; height:150px; width:15px; z-index:3" class="bg_vertical">
</div>
 
 
<div id="Layer4" style="position:relative; height:100%; z-index:4" class="bloc2"><span class="texte"><div><img src="images/puces/boule.gif" width="28" height="18" class="texte"><span class="texte">Vous n'&ecirc;tes pas connect&eacute;, ou inscrit.</span></div>  
- <a href="#">Inscription </a><br>
- <a href="#">Mot de passe perdu </a><br>
- <a href="#">Informations </a><br>
- <a href="#">Liste des membres </a></p> Bla Bla</span></div>
 
<hr style="visibility:hidden; clear:both" />
 
</div>


 
(sinon je suis pas sur de l utilité des z-index....dreamweaver s en sert par defaut mais je ne m en suis jamais servi)


Message édité par VanessaUsedT0Live le 26-03-2004 à 23:46:37
Reply

Marsh Posté le 27-03-2004 à 08:08:53    

Oui, c'est de ça que je parle...

Reply

Marsh Posté le 27-03-2004 à 20:07:56    

le height=100% pour un div fonctionne, mais sous un navigateur autre que IE (firefix par exemple)

Reply

Marsh Posté le 27-03-2004 à 21:27:30    

swich a écrit :

le height=100% pour un div fonctionne, mais sous un navigateur autre que IE (firefix par exemple)


 
lis un peu les autres posts avant de dire des betises :sarcastic:

Reply

Marsh Posté le 29-03-2004 à 04:09:55    

swich a écrit :

le height=100% pour un div fonctionne, mais sous un navigateur autre que IE (firefix par exemple)


 
meme sur ie ca marche c est moi qui suis con :(
désolé :pfff:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed