Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1540 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  CSS hauteur 100%

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS hauteur 100%

n°445937
Pyksel
Locker fou !
Posté le 22-03-2004 à 20:00:38  profilanswer
 

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...

mood
Publicité
Posté le 22-03-2004 à 20:00:38  profilanswer
 

n°445939
metos
҉ OOoo hi-lo powered
Posté le 22-03-2004 à 20:03:21  profilanswer
 

ca va sur prog plutot ca nan ?


---------------
icite ca shoot : albphoto.fr   //   la ca bricole : albworkshop.fr  //  A VENDRE Canon ST-E2
n°445950
Pyksel
Locker fou !
Posté le 22-03-2004 à 20:16:54  profilanswer
 

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
n°445952
moazaaa
Le retour...
Posté le 22-03-2004 à 20:26:43  profilanswer
 

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
n°445956
Pyksel
Locker fou !
Posté le 22-03-2004 à 20:35:28  profilanswer
 

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
n°445995
a e r o n
Posté le 22-03-2004 à 21:19:03  profilanswer
 

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 : /

n°445996
Mattc
Feel like I could...TAKE ON...
Posté le 22-03-2004 à 21:25:35  profilanswer
 

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...."
n°446049
VanessaUse​dToLive
Torchon ET Serviette
Posté le 22-03-2004 à 23:26:45  profilanswer
 

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
n°446070
moazaaa
Le retour...
Posté le 23-03-2004 à 00:04:17  profilanswer
 

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

n°446090
Pyksel
Locker fou !
Posté le 23-03-2004 à 06:41:04  profilanswer
 

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...

mood
Publicité
Posté le 23-03-2004 à 06:41:04  profilanswer
 

n°446092
Gnub
Posté le 23-03-2004 à 08:00:40  profilanswer
 

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]

n°446581
T509
$job-&gt;GetJob(now)
Posté le 24-03-2004 à 11:51:43  profilanswer
 
n°447188
antp
Super Administrateur
Champion des excuses bidons
Posté le 26-03-2004 à 10:15:47  profilanswer
 

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
n°447309
VanessaUse​dT0Live
Torchon ET Serviette
Posté le 26-03-2004 à 15:43:20  profilanswer
 

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/
 

n°447479
Pyksel
Locker fou !
Posté le 26-03-2004 à 19:18:31  profilanswer
 

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...

n°447606
VanessaUse​dT0Live
Torchon ET Serviette
Posté le 26-03-2004 à 23:44:23  profilanswer
 

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
n°447648
Pyksel
Locker fou !
Posté le 27-03-2004 à 08:08:53  profilanswer
 

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

n°447911
swich
snps
Posté le 27-03-2004 à 20:07:56  profilanswer
 

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

n°447937
VanessaUse​dT0Live
Torchon ET Serviette
Posté le 27-03-2004 à 21:27:30  profilanswer
 

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:

n°448326
VanessaUse​dT0Live
Torchon ET Serviette
Posté le 29-03-2004 à 04:09:55  profilanswer
 

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:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  CSS hauteur 100%

 

Sujets relatifs
[DIV, CSS] "wraper" un mot ?Design site, problème CSS
problème de tableaux CSS[CSS] Recherche tutorial pour faire Onglet
les CSS avec IE6 pas backwards compatible avec IE5xx ??[Dreamweaver MX] grosse aide sur les zones facultative / chang. CSS
[Avis demandés] Site Web sur un salon IRC. XHTML et CSS.[dreamweaver MX] Qui se debrouille dans les MODELES et CSS dw mx ?
Différence Style CSS/Tableaux[CSS] Positionnement (was[HTML] Probleme pour placer mes tableaux)
Plus de sujets relatifs à : CSS hauteur 100%


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR