Hauteur d'un div

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

4 réponses

gryzzly Messages postés 5220 Statut Contributeur 1 335
 
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.
0
Gihef Messages postés 5165 Statut Contributeur 2 779
 
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é “}”.

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” ?

--
0
gryzzly Messages postés 5220 Statut Contributeur 1 335
 
Oooops.
Arf mais oui, c'est l'inverse qui se produit... milles excuses...
0
Gihef Messages postés 5165 Statut Contributeur 2 779
 
Salut gryzzly,

Le “Non plus” appuyait simplement ton “Non. (enfin je ne pense pas)”.
Je ne le pense pas non plus.
  (-:

Quant au “min-height”, je ne suis pas sûr qu'il fonctionne partout ???

--
0
gryzzly Messages postés 5220 Statut Contributeur 1 335
 
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.
0
Gihef Messages postés 5165 Statut Contributeur 2 779
 
Bravo.

Et bonne partie.

--
0