Discussion :

[vct68]

Bonjour,
Je me confronte à une situation html/css que je n'arrive pas à mettre en place :

j'ai un conteneur d'une certaine hauteur et dans celui-ci j'ai 3 div :

CONTENEUR VARIABLE------


DIV1 hauteur et largeur fixe img en background

DIV2 hauteur variable permettant de compléter l'espace

DIV3 hauteur et largeur fixe img en background


CONTENEUR VARIABLE------


Je n'arrive pas à faire en sorte que ma div2 s'adapte à l'espace vide en fonction de la hauteur de mon conteneur.
J'ai testé height:100% mais alors elle écrase la div3

Quelqu'un a une idée ?

Voici l'adresse de mon essai : http://vincent.wicky.free.fr/
=> c'est la boite blanche qui doit être grande de sorte que les 3 boites cumulées soit dans la boite rouge.

Voici mon code css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#cadre{
width:210px;
height:500px;
background-color:red;
border:solid 1px black;
}
#cadre1{
position:relative;
margin-top:10px;
margin-left:3px;
width:200px;
height:200px;
background-color:yellow;
border:solid 1px black;
}
#cadre2{
position:relative;
margin-top:10px;
margin-left:3px;
width:200px;
height:200px;
background-color:blue;
border:solid 1px black;
}
#cadre3{
position:relative;
margin-top:10px;
margin-left:3px;
width:200px;
height:10px;;
background-color:white;
border:solid 1px black;
}

[Raphael_Lemaire]

Salut,

Si tu as l'intention de conserver une hauteur fixe pour ton cadre, tu peut simplement fixer la hauteur de ta div blanche également.

J'ai obtenu un résultat proche de ce que tu souhaite en cherchant un peu, avec des hauteurs en pourcentage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
body {
	margin: 0;
	padding: 0;
}
 
#cadre {
	height: 100%;
	width:210px;
	background-color:red;
	border:solid 1px black;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
#cadre1 {
	width:200px;
	height:30%;
	background-color:yellow;
	border:solid 1px black;
}
#cadre2 {
	margin-top:10px;
	margin-left:3px;
	width:200px;
	height:30%;
	background-color:blue;
	border:solid 1px black;
	position: absolute;
	bottom: 10px;
}
#cadre3 {
	margin-top:10px;
	margin-left:3px;
	width:200px;
	background-color:white;
	border:solid 1px black;
	height: 35%;
}

A adapter selon tes désirs.

[vct68]

Salut, merci pour ta réponse mais cela ne correspond pas idéalement à ce que je souhaite.

Le but étant d'avoir une image dans le cadre bleu et jaune. Ces box ne doivent pas être extensibles, en revanche c'est la box blanche qui doit compléter et donc s'étirer. Avec ton code j'ai chaque box qui s'étirent équitablement, ce qui ne va pas.

Je travail sur ton css mais si tu as d'autres idées je t'en pris répond moi

Merci,
Vincent.

[atom41]

En CSS "pur" je vois pas trop comment faire... par contre ça me semble assez facile à faire en javascript
Au chargement de la page, tu récupères la hauteur du bloc conteneur, tu calcules la hauteur souhaitée pour ta div centrale et tu l'appliques.

[vct68]

oula oula...

Merci pour ton intervention mais je ne souhaite pas utiliser du javascript pour faire de la présentation, sinon il faut que je repense ma façon de faire des div.
Voici la finalité, si quelqu'un saurait :
j'espère que ça va rester en forme

----------------site--------------
|--------------header-----------|
| |
|------------header-------------|
|-----left-----|-------contenu---|
|-ilustration1 -| |
| | |
|-ilustration1 -| |
|-cadre vide- | |
| | |
|-cadre vide- | |
|-ilustration2- | |
| | |
|-ilustration2- | |
|--left--------|-------contenu---|
------------site-------------------

arf ça n'a aucune gueule, je vais modéliser ça en ligne en prenant des valeurs fixe... je post dès que c'est fait...

[atom41]

Moi aussi j'étais récalcitrante à utiliser du javascript pour la mise en forme, mais depuis que j'ai découvert jquery... je me soigne ! Avec jquery tu as la possibilité de jouer très simplement sur les propriétés CSS, mais via javascript qui serait (à ma connaissance) indispensable pour réaliser ce que tu souhaites.

[vct68]

Voilà j'ai fait le modèle de boite que je souhaite avoir : http://vincent.wicky.free.fr/

merci pour votre aide.

[romain_ci]

je ne voi pas tro le probleme !!! tu peu faire ce modele avec seulement du CSS. pa besoin de javascript !

[vct68]

J'ai bien réussi a tout réaliser mais comment gérer la hauteur de div variable romain_ci ?

Merci

[romain_ci]

justement en ne metten pas de hauteur defini dans le css.

Apres si tu veut une hauteur minimal il y a la propriete 'min-height'. Mais attention avec cette utilisation car elle marche bien dans FF mai pas sous IE donc il fo faire une seconde feuille de style pour IE.

Pour FF

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#tonDiv {
   width:500px; //par exemple
   min-height:300px;
}

Pour IE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#tonDiv {
   width:500px; //par exemple
   height:300px;
}

Alors pkoi la propriete height tu vas me dire ?
Hé bien IE gere lui même le min-height avec un height...
Oui c'est pourri ! mais c'est comme ca !

[vct68]

Mais si je ne met pas de hauteur du tout, la div rester vide et on ne voit que les bordures qui se superposent sur elle même comme le height est null.

Puisqu'il n'y a pas de hauteur, je ne vois pas en quoi elle pourrait s'aggrandir... je pense qu'il manque un paramètre quand même. je vais tenter et je te montrerai le résultat!

merci

[vct68]

En fait j'ai trouvé une autre façon de faire mais je parviens à aucun résultat maisje suis sur que c'est possible.

J'ai mon menu de gauche et à celui-ci je veux mettre collé en haut de la div une illustration, ainsi qu'au pied de la div, mais je parviens pas à faire en sorte que celle collé au pied de div se déplace...

Solution?

[romain_ci]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#tonFoot {
   position:relative;
}

je pence ?!