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.