Fixer un contenu en fonction d'un % et d'une taille en px

**sourivore** · 11/04/2009, 11h48

Bonjour,

Voici un exemple de ce que je voudrais obtenir.

J'ai un bloc qui fait 100% de hauteur dans ma page.

Ce bloc contient 5 blocs (disposés donc verticalement)

Le 2e bloc fait 150px
Le 5e bloc fait 200px
Le 1e bloc fait 10% de la hauteur restante
Le 3e fait 30% de la hauteur restante
Le 4e enfin fait les 60% de hauteur restants.

C'est la qu'est mon problème pour le 2e et le 5e je n'ai pas le choix que de mettre height : 150px; et height: 200px; mais si pour les autres je met height: 10%, height: 30% ou height: 60%, ce pourcentage s'effectue sur tout le bloc et non sur la hauteur restante une fois supprimés les blocs 2 et 5.

Comment puis-je mixer les 2 ?

Merci d'avance.

**Poulpynette** · 14/04/2009, 10h30

Bonjour,

Ce n'est pas très clair, un peu de code ou un schéma seraient bienvenus.

Ceci dit, le mieux est je pense de définir la hauteur de la même manière partout : en px ou en %

Sinon tu fais un bloc qui englobe les 3 restants et tu définis sa hauteur à 100%. Ainsi les 3 blocs que tu souhaites définir en % se baseront sur le bloc englobant.

Je ne sais pas si je suis très claire

**Candygirl** · 15/04/2009, 03h15

On pourrait imaginer qqch comme ça:

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
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
* {margin:0;padding:0;}
 
html,body {height:100%;}
 
#main {
	position:absolute;
	top:0;bottom:350px;
	width:100%;
	background:black;
}
 
#bloc1 {
	height:10%;background:red;
}
 
#bloc2 {
	height:150px;background:yellow;
}
 
#bloc3 {
	height:30%;background:green;
}
 
#bloc4 {
	height:60%;background:blue;
}
 
#bloc5 {
	height:200px;background:purple;
}
</style>
</head>
 
<body>
<div id="main">
	<div id="bloc1">10%</div>
	<div id="bloc2">150px</div>
	<div id="bloc3">30%</div>
	<div id="bloc4">60%</div>			
	<div id="bloc5">200px</div>
</div>
</body>
</html>

(ne fonctionnera pas sur IE6)

**sourivore** · 20/04/2009, 15h18

Merci Poulpynette pour ta réponse.
Si tu veux un exemple Candy en a fourni un très bon.

Je rebondis justement sur cela car il y a deux choses qui me bloquent :
- L'incompatibilité avec IE6 (dont je ne comprend pas l'origine) => IE6 fait également partie de ma cible (malheureusement)
- La position en absolute qui fonctionne bien pour un DIV parent qui prend toute la page mais qui ne fonctionne pas pour des DIV qui sont dans d'autres DIV en position relative.

Si comme je vois dans d'autres forums et comme tu dis Poulynette, il faut soit n'utiliser que des % soit utiliser uniquement des px ceci est très contraignant (j'ai une vision des CSS dans laquelle il est possible de tout faire)
Sinon, je m'interroge sur la flexibilité des CSS.

En effet, il n'est pas toujours possible d'effectuer cela.

Je ne pense pas farfelue l'idée (pour faire un exemple plus simple), d'une image "bandeau" contenue dans un DIV en en-tête de page avec une hauteur définie en px (je vois mal comment on pourrait définir cela en %) et d'un découpage en 2 blocs à 50%/50% du reste de la hauteur de la page...

EDIT : Je ne l'ai pas dit mais merci à toi aussi Candy

EDIT 2 : Je marque le coup sur ce message qui est le 404ème, nombre au combien significatif pour un développeur tel que moi

**Poulpynette** · 20/04/2009, 16h57

Envoyé par sourivore

(j'ai une vision des CSS dans laquelle il est possible de tout faire)
Sinon, je m'interroge sur la flexibilité des CSS.

Dans ce cas arme-toi de patience !

On peut, je le crois, arriver à faire énormément de choses en CSS.
Cependant, certaines choses dont le concept est très simple peuvent devenir complètement pénibles à réaliser. Je sais de quoi je parle.

Mais je t'encourage à persévérer

**sourivore** · 20/04/2009, 17h13

Merci Poulpynette !

Pour ta solution Candy, après recherche, il est fort probable que l'on puisse contourner le pb de IE grâce au mot-clé "expression" dans ta css qui permet d'inclure du JS dans ta CSS (mais uniquement sous IE)

J'avoue que c'est assez crados mais j'ai pas mieux (et le second problème reste entier lui)...

**Candygirl** · 20/04/2009, 18h30

Envoyé par sourivore

- L'incompatibilité avec IE6 (dont je ne comprend pas l'origine) => IE6 fait également partie de ma cible (malheureusement)

C'est parce que IE6 est incapable de déterminer la hauteur d'un élément lorsque les propriétés top et bottom sont spécifiées les deux, sans height de défini (ce qui nous permet justement ici de mixer pixels et % afin d'obtenir un élément de hauteur 100%-350px).

On peut y palier par un css spécial IE6- avec javacript intégré du genre:

Code :

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

1
2
3
4
5
6
7
<!--[if lt IE 7]>
	<style type="text/css">
		#main {
			height:expression(document.body.clientHeight-350+"px");
		}
	</style>
<![endif]-->

Ne fonctionnera bien sûr pas si javascript est désactivé, mais surfer aujourd'hui avec IE6 et javascript désactivé, ça doit être plutôt rare

Envoyé par sourivore

- La position en absolute qui fonctionne bien pour un DIV parent qui prend toute la page mais qui ne fonctionne pas pour des DIV qui sont dans d'autres DIV en position relative.

J'ai pas trop compris la question...

un exemple, peut-être ?

(EDIT: j'avais pas vu les 2 derniers messages )

**sourivore** · 21/04/2009, 09h08

Pour ta deuxième réponse, je voulais dire que dans ton cas le #main est l'ensemble de la page ce qui ne pose pas de pb pour les positions en absolute.

Mais j'ai peur que quand ça n'est pas le cas les positions en absolute posent problème.

Après ça ressemble plus à de la bidouille, je pense qu'il faudrait que je repense tout en pixel ou en % ce qui n'est pas simple en soi.

Fixer un contenu en fonction d'un % et d'une taille en px

CSS

Vue hybride

Discussions similaires

Partager

Partager