Hauteur d'un div
maxence
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
Bonsoir , regardez ce petit code css svp :
#main {
}
body{margin:0px; text-align : center;}
#first {
height: 200px;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-right-width: 0; border-left-width: 0;
background-color:#E7EBFA;
padding-top: 35px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
}
.second {
height: 18px;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-right-width: 0; border-left-width: 0;
padding-top: 2px;
padding-bottom: 2px;
}
#net {
width: 175px;
height: 800px;
float: left;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 0;
background-color:#F8F8FF;
}
#free {
width: auto;
height: 800px;
float: left;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-bottom-width: 0; border-left-width: 0;
}
#open {
width: 175px;
float: right;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-bottom-width: 0; border-right-width: 0;
background-color:#FF87FF;
padding-top: 10px;
#dernier {
background-color:#000070;
height: 40px;
clear: left;
}
j'ai donc 3 div en forme de rectangles verticaux ( net open et free ) ( au dessus ya des div en forme de rectangles horizontaux ) et en dessous de ces 3 div ya le div #dernier .
Ce que je comprends pas c'est la hauteur de ces div , je suis obligé de mettre 800px sinon ils prennent comme hauteur la hauteur du contenu du div , par exemple si j'écris 5 lignes , le div fera 5 lignes de hauteur , ya t'il moyen que ces 3 div s'insèrent bien automatiquement entre les div du haut et du bas , sans besoin de préciser de hauteur ?
merci
#main {
}
body{margin:0px; text-align : center;}
#first {
height: 200px;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-right-width: 0; border-left-width: 0;
background-color:#E7EBFA;
padding-top: 35px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
}
.second {
height: 18px;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-right-width: 0; border-left-width: 0;
padding-top: 2px;
padding-bottom: 2px;
}
#net {
width: 175px;
height: 800px;
float: left;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-bottom-width: 0; border-left-width: 0; border-right-width: 0;
background-color:#F8F8FF;
}
#free {
width: auto;
height: 800px;
float: left;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-bottom-width: 0; border-left-width: 0;
}
#open {
width: 175px;
float: right;
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-bottom-width: 0; border-right-width: 0;
background-color:#FF87FF;
padding-top: 10px;
#dernier {
background-color:#000070;
height: 40px;
clear: left;
}
j'ai donc 3 div en forme de rectangles verticaux ( net open et free ) ( au dessus ya des div en forme de rectangles horizontaux ) et en dessous de ces 3 div ya le div #dernier .
Ce que je comprends pas c'est la hauteur de ces div , je suis obligé de mettre 800px sinon ils prennent comme hauteur la hauteur du contenu du div , par exemple si j'écris 5 lignes , le div fera 5 lignes de hauteur , ya t'il moyen que ces 3 div s'insèrent bien automatiquement entre les div du haut et du bas , sans besoin de préciser de hauteur ?
merci
A voir également:
- Hauteur d'un div
- Div c++ - Télécharger - Langages
- Dans le document à télécharger, placez les 2 images côte à côte et donnez-leur la même hauteur. marie a gagné un lot à l’un des trois tirages. qu’a-t-elle gagné ? ✓ - Forum Word
- Hauteur de ligne excel 1 cm - Forum Excel
- Taille us hauteur - Forum Loisirs / Divertissements
- Remplacer #div/0 par vide ✓ - Forum Excel
4 réponses
Non. (enfin je ne pense pas)
En revanche, tu peux préciser avec la propriété min-height la hauteur mini. Ainsi, si ton texte prend en hauteur plus de 800, le div s'alongera vers le bas et ne sera pas "bloqué" sur 800.
En revanche, tu peux préciser avec la propriété min-height la hauteur mini. Ainsi, si ton texte prend en hauteur plus de 800, le div s'alongera vers le bas et ne sera pas "bloqué" sur 800.
Bonjour,
Non plus. On ne peut pas faire comme ça.
Mais tu peux le simuler avec une image de fond :
http://forum.alsacreations.com/faq/faq-17-Comment-faire-des-quotcolonnesquot-de-meme-hauteur-.html
http://www.ejeliot.com/blog/61
Ce qui va être difficile avec ta mise en page élastique.
++
Le “#open” n'est pas fermé “}”.
Il est possible que “clear : both;” serait préférable pour “#dernier” ?
--
Non plus. On ne peut pas faire comme ça.
Mais tu peux le simuler avec une image de fond :
http://forum.alsacreations.com/faq/faq-17-Comment-faire-des-quotcolonnesquot-de-meme-hauteur-.html
http://www.ejeliot.com/blog/61
Ce qui va être difficile avec ta mise en page élastique.
++
Le “#open” n'est pas fermé “}”.
border-width: 1px; border-style: solid; border-color: #000000; border-top-width: 0; border-right-width: 0; border-left-width: 0;pourrait être définit comme ça
border-bottom : 1px solid #000;
Il est possible que “clear : both;” serait préférable pour “#dernier” ?
--
Ahhhhhhh. je croyais que tu disais non plus, ma solution ne marche pas.
Bref peu importe.
Dans mon lien, il y a le tableau de compatibilité. Ca ne fonctionne pas partout effectivement, mais il me semble que l'effet ne serait pas celui escompté, mais plutot un "blocage" de la réduction du div en resize de la page/selon la resolution d'ecran... et la, j'ai pas le courage d'ecrire 10 lignes de code pour tester :s
j'ai une partie en cours :-)
mais j'ai souvenir du min-width → http://marmottemanu.free.fr/share/ccm/sites/castel/ que j'avais utilisé pour empecher le chevauchement de l'entete texte sur la voiture lors du resize de la page.
bref, faut viser autre chose probablement.
Bref peu importe.
Dans mon lien, il y a le tableau de compatibilité. Ca ne fonctionne pas partout effectivement, mais il me semble que l'effet ne serait pas celui escompté, mais plutot un "blocage" de la réduction du div en resize de la page/selon la resolution d'ecran... et la, j'ai pas le courage d'ecrire 10 lignes de code pour tester :s
j'ai une partie en cours :-)
mais j'ai souvenir du min-width → http://marmottemanu.free.fr/share/ccm/sites/castel/ que j'avais utilisé pour empecher le chevauchement de l'entete texte sur la voiture lors du resize de la page.
bref, faut viser autre chose probablement.