[XHTML/CSS] Hauteur des balises <div>

Free K, le jeudi 21 avril 2005 à 21:24:14

Signaler ce message aux modérateurs

Bonjour à tous,

Je suis un passionné de standards XHTML et CSS, mais il y a un problème que je n'ai jamais réussi à résoudre sans utiliser un moyen détourné, lent, complexe et pas propre :

il s'agit d'attribuer une hauteur maximale (100% du conteneur) à une balise <div>.

Bien entendu, on pense directement à :

DIV.maClasse {
height: 100%;
}

Mais les tailles (width et height) en pourcentages (%) ne fonctionnent pas pour les balises de type bloc (donc <div>).

Par exemple, pour une barre de navigation, à côté de la zone de contenu de la page : ce sont deux <div>, l'un généralement plus long (haut) que l'autre : celui du contenu, et on veut que dans ce cas le bas de la barre de navigation soit aligné avec celui de la zone de contenu, qui est plus grande, autrement dit que le <div> de la barre de navigation ait une hauteur maximale par rapport à celle de la page entière.

J'espère que ça parlera à quelqu'un, et merci beaucoup si vous trouvez une solution !

Meilleures réponses pour « [XHTML/CSS] Hauteur des balises <div> »

Posez votre question Répondre

crabs, le jeudi 21 avril 2005 à 21:38:49

Salut,
Tu peux essayer avec postion: absolute, puis top et bottom dans un div.
Ce div il faut lui mettre un id et pas un class, comme ça tu peux le
retrouver avec du javascript.
Pour les navigateurs respectant le W3C, tu peux même essayer avec
position: fixed => le cadre ne se déplace plus avec la page
Attention, ça fontionne pas avec IE le fixed, il faut jouer avec
javascript sur l'évement scroll du body pour repositionner le cadre
à chaque déplacement, ça fait scintiller mais la fonctionnalité est là...

A+, Crabs ..., I think Slackware sounds better than 'Microsoft,'
-- Patrick Volkerding - founder and maintainer of Slackware

Répondre à crabs

Nitruk, le samedi 30 décembre 2006 à 17:07:34

Utilise document.body.clientHeight, en javascript, et document.body.clientWidth.
En ce qui me concerne, je suis confronté à un problème similaire, je voudrais obtenir la hauteur maximale de la zone contenu (celle de la fenêtre quand elle est maximisée) sans avoir à redimensionner la fenêtre. Je pourrais le calculer facilement si je trouvais une propriété qui donne la hauteur totale de la fenêtre

exemple avec window.height :

hauteurmax = parseInt(document.body.clientHeight) / parseInt(window.height) * parseInt(screen.availHeight);

Répondre à Nitruk

Artis.psyko, le mercredi 14 novembre 2007 à 20:19:26

Tiens nu vieux sujet. ^^
Je vais quand même ajouter ma pierre.

Déjà les blocs prennent toute la place qu'ils peuvent par defaut ( =100%).
Ensuite, bien sur que si les bloc acceptent les pourcentages. Seulement il faut savoir que le pourcentage se calcule sur la taille du bloc parent. Ainsi il faut qu'il ai une taille (enfin de mon côté ça n'a jamais marché si la taille du parent n'était pas spécifié, sauf en pourcentage).

Voilà. ^^

Répondre à Artis.psyko

Gihef, le mercredi 14 novembre 2007 à 22:18:39

Bonjour,

En fait ce problème n'a pas de solution.

Il faut s'y prendre autrement et donner l'impression que les blocs ont la même hauteur.

Ça peut se faire avec une image d'arrière-plan dans le bloc le plus grand qui contient les autres
pompage
alistapart (en)

--

Répondre à Gihef

lybepe, le jeudi 7 février 2008 à 12:33:40

Le probleme de cette solution c'est que firefox ne comprends pas que la <div> parent a une hauteur variable ... j'essaie de me pencher dessus mais je ne trouve pas de solution : help !

Répondre à lybepe

Dalida, le jeudi 7 février 2008 à 12:45:16

Salut,

tu ne trouveras sans doute pas mieux mieux que les fausses colonnes conseillées par Gihef en <4>.

[ Mathieu ]
« On embauchera plus s'il est moins compliqué de licencier. » LP, 29 août 2007.

Répondre à Dalida

Ululo, le mardi 18 mars 2008 à 16:05:38

Je n'ai pas vraiment de solution mais moi j'utilise des marges.
Par exemple pr un div d'environ 85%, étant donné que les largeurs de fenêtres ne varient pas énormément, je mets une marge de 150 px à gauche et la même à droite.
Ululo

Répondre à Ululo

Floriang33, le mardi 18 mars 2008 à 16:25:36

C'est pas encore possible en CSS2.

Quand tu attribus en CSS un width ou un height, ils s'appliquent sur le contenu interne. La division est extensible en hauteur par defaut.

Toute fois, tu peux essayer quelque chose qui se raprochera pas mal de se que tu veux. Il s'agit bien de mettre un height: 100%;, mais il faut ainsi y rajouter un margin: auto; afin que la specification soit prise en compte par rapport au body exterieur.

Donc ça donnerait:

.taClasse {
height: 100%;
margin: auto;
}

Je pense que ceci marchera si toute fois tu as bien coder l'interface exterieur.

Répondre à Floriang33

magichit, le mardi 18 mars 2008 à 17:47:30

Salut,
j'espéres pas répondre à côté mais:

Pourquoi pas utiliser un un <table> plutot? ça permet de créer une vrai colonne, et c'est plus simple que de devoir modifier le positionnement des div avec des float ou en absolute voire faire des calculs en js.

<table style="width="100%; height:100%;" >
<tr>
<td>
Colonne de 100% a gauche
</td>
<td>
Le reste du contenu de la page
</td>
</tr>
</table>

Répondre à magichit

Dalida, le mardi 18 mars 2008 à 18:31:41

Salut,

tout simplement parce qu'un tableau ne doit pas servir à la mise en page.
[ Mathieu ]

Pensez à utiliser le bouton "Conserver la mise en forme du texte sélectionné" pour mettre en forme les codes sources et à cocher l'option "Résolu" quand c'est le cas, merci !

Répondre à Dalida

poids lourd, le jeudi 7 août 2008 à 14:19:16

Bonjour
je viens de lire ton post sur le forum
et j'aimerais que tu me file un coup de main
je cherche comment faire pour introduire un scroll bar sur la droite du contenu de mon site de sorte que le header, le footer et les menu ne bouge pas. au fait mon site est fait avec un noyau joomla
please c urgent. merci d'avance...www.agimexgates.com

Répondre à poids lourd

Dalida, le mercredi 20 août 2008 à 11:17:02

Salut,

ouvre un fil de discussion et présente ton problème.
tu peux commencer par corriger les erreurs de validité.

et soit dit en passant, pour un site professionnel tu ferais mieux de faire appel à un professionnel.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Répondre à Dalida

Poids lourd, le jeudi 21 août 2008 à 14:57:57

Bonjour dalida
en fait j'ai résolu mon problème juste en appliquant les bonnes propriété à la balise div et en jouant avec "overflow:" et maintenant je l'ai appliqué sur un site que je mettrai en ligne le 30 aout prochain almconsultants.com donc n'hésite pas à visiter

Répondre à Poids lourd

grafx, le jeudi 21 août 2008 à 13:30:13

Regarde au niveau des propriétés des div anciennement calques sous dreamweaver
essaye la propriété
div{ overflow:auto;}

Répondre à grafx

Poids lourd, le jeudi 21 août 2008 à 15:01:45

Merci chef
ca marche et j'ai appliqué ca sur un site que je met en ligne a la fin de ce mois donc n'hésite pas : almconsultants.com

Répondre à Poids lourd

capoeiradance, le lundi 24 mars 2008 à 22:07:35

Bonsoir tout le monde je viens à l'instant de trouver la réponse à votre problème pour mettre une hauteur en pourcentage à une div et je vous dirais pas c'est quoi mouahahaha...je plaisante me haissais pas tout de suite rooooh.

Bon voila mon code HTML:

<div id="wrapper"></div>

Code CSS:

html{
height: 100%;
}
body{
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
width: 100px;
height: 100%;
background-color: #03125F;
margin: auto;
}

Comme vous pouvez le constater il faut remonter jusqu'à la balise HTML et lui assigner une hauteur en pourcentage de 100% comme sur le body,ensuite vous pouvez mettre la hauteur que vous voulez à votre div.
Bonne soirée, il y a mon adresse si vous voulez. younass95@hotmail.com

Répondre à capoeiradance

ameyrus, le dimanche 20 avril 2008 à 18:58:44

Hey

merci capoeiradance!!!! pile poil ce que je cherchais ^^

@+

Répondre à ameyrus

CauxMika, le lundi 12 mai 2008 à 16:14:55

Parfait ! Merci beaucoup, 2 heures que je cherchais ;-)

Répondre à CauxMika

Thomas44, le samedi 28 juin 2008 à 04:51:31

Bonsoir
J'ai un petit soucis avec le cadre de ma page web : http://lifebooster.free.fr/ecouter_de_la_musique.html
On voit bien que les <div> utilisées pour les bords latéraux ne s'adaptent pas à la taille du <body>.
Voici le code CSS associé :

html
{
height: 100%;
width : 100%;
}

body
{
height: 100%;
width : 100%;
margin: 0;
padding: 0;
}

#leftcenter
{
height : 100% ;
width : 32px ;
background-image : url(pics/cadre/leftcenter.gif);
background-repeat : repeat-y ;
float : left;
}

#rightcenter
{
height : 100% ;
width : 40px ;
background-image : url(pics/cadre/rightcenter.gif);
background-repeat : repeat-y ;
float : right;
}

Merci de votre aide :)

Répondre à Thomas44

Ululo, le mercredi 26 novembre 2008 à 21:04:47

Déjà "height=100%" n'est pas correct je crois, ça donne 100% de la largeur de la page en hauteur si je ne me trompe.
Ensuite ton lien n'est pas valide, et à partir de la base du site (lifebooster.free.fr) je n'ai pas retrouvé la page.
Mais en tous cas moi je n'aurai pas organisé ça comme ça, surtout qu'on a pas le CSS de ta div centrale là.

Répondre à Ululo

Posez votre question Répondre

Adapter la hauter des balise a leur conteneur Bonjour, Je veux adapter la hauteur de mes balises div a leur conteneur. voici le code texte www.commentcamarche.net/forum/affich-11636543-adapter-la-hauter-des-balise-a-leur-conteneur

[HTML] Maitriser les balises Div Salut tout le monde, Je n'arrive pas a maitriser les balises DIV, de facon a etre compatible avec IE et les autres... J'aimerais bien tout spécifier en ABSOLUTE, mais ma balise finale, je ne sais pas comment la définire. Ma page varie en hauteur,... www.commentcamarche.net/forum/affich-2279033-html-maitriser-les-balises-div

Centrer balise div (playlist deezer) Bonjour, Voilà j'ai un gros problème, deviner ou? sur firefox... Firefox est le meilleur je vous l'accorde, c'est internet explorer qui merde mais malgré tout je n'arrive pas à centré ma playlist Deezer qui se trouve dans un balise div. Voici le code... www.commentcamarche.net/forum/affich-5507955-centrer-balise-div-playlist-deezer

Résultats pour [XHTML/CSS] Hauteur des balises <div>

Toutes les balises XHTML et CSS (Résolu)Salut ^^ Je cherche un site ou un livre recensant TOUTES les balises XHTML, CSS et PHP sans exceptions. Quelqu'un aurait ça sous la main ? ^^ Merci :) www.commentcamarche.net/forum/affich-2433992-toutes-les-balises-xhtml-et-css

Hauteur minimale balise div sous IE (Résolu)Bonjour, J'ai fait l'expérience et il m'est impossible de créer une boite à la l'aide de la balise div de hauteur minimum à 19 pixels sous IE. Sous Firefox pas de soucis. Voici le code pour le boite de hauteur 5 pixels, elle apparaît de hauteur 19... www.commentcamarche.net/forum/affich-12012273-hauteur-minimale-balise-div-sous-ie

CSS:largeur fixe/relative ...est-ce possible?Salut, J'ai un probleme avec un site php utilisant du css J'ai deux parties dans mon site, un menu a gauche et le reste de la page a droite. J'utilise des div et du css pour gerer ca. je souhaiterais que le menu de gauche ait une taille fixes de... www.commentcamarche.net/forum/affich-4786315-css-largeur-fixe-relative-est-ce-possible

Résultats pour [XHTML/CSS] Hauteur des balises <div>

Les classes de style (CSS)Les classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des... www.commentcamarche.net/contents/css/cssclass.php3

Positionner des éléments grâce aux CSSIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse... www.commentcamarche.net/contents/css/cssposition.php3

La syntaxe des style (CSS)Définition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de... www.commentcamarche.net/contents/css/csssyntax.php3

Résultats pour [XHTML/CSS] Hauteur des balises <div>