[HTML / CSS] Hauteur d'un div.. [Résolu]

Tiller 788Messages postés 4 juillet 2007Date d'inscription - Dernière réponse le 11 août 2010 à 16:21

Bonjour,
Malgrès mes années d'expérience, il y a toujours eu un point où je n'ai jamais réussi ;D
C'est faire un div, de sa hauteur maximum..
Je m'explique, j'ai une page, toute simple, en haut je met un premier Div, avec par example, height: 20px
Et juste après, une deuxième div, et lui, je voudrais, en gros qu'il fasse toute la hauteur qu'il reste. Si on met 100%, il débordera de la page de 20px..
En gros je cherche une sorte de height: 100% - 20px; qui n'existe pas biensur..
J'ai toujours fais par javascript et donc j'aimerais savoir si il y avait un autre moyen =)
Ps: Pas de tableaux

[HTML / CSS] Hauteur d'un div »

Suggestions

[HTML / CSS] Hauteur d'un div..
[HTML] texte à la verticale (Résolu) » Forum
Comment centrer une image en css (Résolu) » Forum
Div qui prend toute la Hauteur de l'Ecran css (Résolu) » Forum
Masquer/afficher Div avec CSS sans JS (Résolu) » Forum
Un petit espace entre mes bloc de div (Résolu) » Forum

Plus

Réponse

vignemail1 1251Messages postés 8 septembre 2007Date d'inscription 4 novembre 2010Dernière intervention 23 août 2008 à 15:10

<div id="banniere"></div>
<div id="main"></div>

avec en CSS:

#banniere {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
}

#main {
position: absolute;
top: 20px;
bottom: 0px;
left: 0px;
right: 0px;
}

marche sous firefox et autres navigateurs respectueux un minimum des normes W3C
marche pas sous IE6 et inférieur car le positionnement absolute n'utilise pas le même élément parent comme référence de positionnement. Astuce pour contrer cela, mettre les deux div dans un <div> position: relative, il parait que cela marche, j'ai jamais vraiment tester moi même

Ajouter un commentaire - Site web

Tiller- 23 août 2008 à 16:18

--- Comme un modérateur a fait le ménage je reposte le lien ---

Lien pour corriger sous IE6:
http://merri.net/bugs/ie_bottom_right.html

Réponse

Tiller 788Messages postés 4 juillet 2007Date d'inscription 23 août 2008 à 14:51

Oui mais non, Sa serait trop simple comme sa XD

C'est pour m'adapter à la taille de l'écran, donc je ne connais pas la hauteur de base.

Et height: auto n'a jamais marché si je ne m'abuse

On dit que les oiseaux sont libres dans le ciel,
Mais la vraie liberté n'est pas celle d'avoir un endroit
où se poser ?

Ajouter un commentaire - Site web

Réponse

Ricky38 4414Messages postés 15 mars 2008Date d'inscription 29 mai 2012Dernière intervention 23 août 2008 à 14:55

height fonctionne très bien je m'en sert très souvent :)

<div id="container" height 100%>
<div id="header" height 20%> ton contenu</div>
<div id="contenu" height 60%>ton contenu</div>
<div id="footer" height 20%>ton contenu</div>
</div>

P-e ça alors lol

Ajouter un commentaire

Réponse

Tiller 788Messages postés 4 juillet 2007Date d'inscription 23 août 2008 à 14:57

Jamais chez moi, et ton code ne m'interesse absolument pas >.> J'ai précisé une taille précise en Pixel pas en %

width:100%-10px;

Cela n'a jamais existé, n'est absolument pas standard et n'a jamais marché avec moi

Ajouter un commentaire - Site web

Réponse

Ricky38 4414Messages postés 15 mars 2008Date d'inscription 29 mai 2012Dernière intervention 23 août 2008 à 15:00

ohh désolé de vouloir aider

alors vas-y avec :

height:100%-20px;

Bonne journée !

Ajouter un commentaire

Réponse

Tiller 788Messages postés 4 juillet 2007Date d'inscription 23 août 2008 à 15:01

Je viens de dire que cela n'existe pas, et ne marche pas

Ajouter un commentaire - Site web

Réponse

Tiller 788Messages postés 4 juillet 2007Date d'inscription 23 août 2008 à 15:10

Ce n'est pas moi le problème, ta propriété n'existe absolument pas.

http://tillersama.hd.free.fr/CCM/test.htm
Et si tu penses que c'est de ma faute que sa ne marche pas:
1/ Mate le code source
2/ http://jigsaw.w3.org/...

Ajouter un commentaire - Site web

Réponse

Tiller 788Messages postés 4 juillet 2007Date d'inscription 23 août 2008 à 15:15

Je te dirais que t'y connais rien =)

Car, merci Vignemail, sa marche parfaitement ;)
Et c'est completement valide.

Ajouter un commentaire - Site web

C.D-A - 11 août 2010 à 16:21

Essaye de ne pas utiliser les pour cent mais uniquement les pixels..... et de simuler le 100% puisque tu peu connaitre ou forcer la résolution.
Je n'ai pas bien répondu mais je travail et n'ai pas de temps pour la recherche.

Réponse

-1

Ricky38 4414Messages postés 15 mars 2008Date d'inscription 29 mai 2012Dernière intervention 23 août 2008 à 14:47

Salut,

tu peux pallier en créant un div container qui lui contient tous tes autres div. sur le div container tu lui mets la hauteur que tu veux

<div id="container" height 800px>
<div id="header" height 20px> ton contenu</div>
<div id="contenu" height 760px>ton contenu</div> ///donc  800 - 20 - 20
<div id="footer" height 20px>ton contenu</div>
</div>

tu peux aussi mettre ta hauteur du div contenu a "auto"

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

[HTML / CSS] Hauteur d'un div.. [Résolu]

[HTML / CSS] Hauteur d'un div »

Passage au tout numérique : quel coût pour les particuliers ?