Fixer une div en bas d'une div

Version imprimable

27/05/2009, 12h05
lifty

Fixer une div en bas d'une div
Re-Bonjour,

Mon problème est le suivant, je suis sous IE7(ce n'est pas ça mon problème :mouarf:), j'ai 3 div A, B et C.
La div A prends 35% de largeur de la page et 800px de hauteur (pour l'exemple)
Les divs B et C sont contenues dans la div A, la div B n'est pas fixe et sa taille est variable en fonction de son contenu. La div C quant-à elle devra être fixée en bas de la div A. C'est là que le bas blesse lorsque que je tente de faire
Code:

1 2 3 4 5 .div#C{ position:fixed; bottom:0; }
La div C prends alors toute la largeur de la page et j'ai des problème de css avec le header que j'ai bidouillé (voir ici ).

Je voudrais donc que cette div C soit contenue dans la largeur div A (le CSS ci dessus fonctionne sous firefox mais pas sous IE7).

J'ai tenté de faire
Code:

1 2 3 4 5 div#C { position : absolute; top : expression( ignore = document.documentElement.scrollTop + "px" ); }
comme je l'avais vu sur ce tuto ici même mais rien ne change (c'était pour IE6 en même temps)

Mon 2ème problème est que je ne veut pas que les div B et C se superposent lorsque leurs tailles sont trop grandes (un petit scroll a rajouter mais je ne sais pas comment)

Voilà j'espère ne pas avoir été trop brouillon.:oops:
27/05/2009, 12h51
thomas9501

Explique nous un peu plus à quoi vont te servir les Div A, B et C.
Je suppose que la Div A te servira pour contrôler la largeur des deux autres (pour qu'elles soient identiques), la B pour le contenu et la C pour le pied de page ...

Dans tous les cas, si c'est bien cela : si tu veux que les 3 Div aient la même largeur et que la C soit tout en bas (en dessous de A et B), tu peux toujours mettre la C sous A, lui donner la même largeur et utiliser les propriétés CSS de positionnement ( float:left|right; clear:left|right|none; ) ...

Merci de ta réponse :D
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="A" class="A">  <div id="B" class="B">  </div>   <div id="C" class="C">  </div>  </div> 
Voici un exemple : http://img172.imageshack.us/img172/7889/exempleh.jpg

La Div A n'est qu'un conteneur des divs B et C, en gros il délimite l'espace dans lequel ces divs doivent s'exprimer.

La div B contient les informations relatives a un document affiché en dehors de la div A (ce n'est pas le sujet ici), ces informations étant plus ou moins bien renseigné la taille de la div B peut varier en hauteur.

La div C ne doit pas être un pied de page, je veut juste la fixer en bas afin qu'elle soit toujours visible par l'utilisateur (en gros c'est un menu avec des actions a réaliser sur le document)

Bonjour,

Citation:

Envoyé par lifty

La div C prends alors toute la largeur de la page

Une div positionné en fixed devrait s'adapter à la taille de son contenu, tu as sans doute un problème dans ton code.
Pourrais tu nous montrer tes 1eres tentatives ?
Citation:
Envoyé par lifty
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id="A" class="A">  <div id="B" class="B">  <div>   <div id="C" class="C">  <div>  <div> 
Tu ne fermes pas les Divs, c'est normal ? :aie:

non c'est pas normal :D c'est un oubli dans ma quote :p je corrige !

Voilà mon code html (avec un peu de jsp mais ça n'empêche pas de comprendre)

Code:

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
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<title>Maquette JSP</title>
	<script language="JavaScript" src="./js/script.js" type=text/javascript></script>
	<link title="style" type="text/css" rel="stylesheet"
		href="./css/style.css" />
</head>
<body>
 
	<%--  Div contenant le bandeau  --%>
		<div id="bandeau">
 
		</div>
 
	<%--  Div contenant le detail du document ainsi que les menu des actions correspondantes  --%>
	<div id="detail">
 
		<%--  Div contenant les details relatifs au document  --%>
		<%--  La structure header + footer est fournie par 2 imports--%>
		<div id="detailDocument">
 
			<%--Div qui constitue le conteneur --%>
			<div id="conteneur" class="conteneur" >
 
 
 
			</div>
			<%-- FIN conteneur --%>
 
		</div>
		<%-- FIN detailDocument --%>
 
		<br />
 
		<%-- Div contenant le menu des actions correspondantes au document --%>
		<div id="menu">
 
			<div id="conteneur" class="conteneur" >
				<jsp:include page="./jsp/testMenuDetailPli.jsp"></jsp:include>
			</div>
			<%-- FIN conteneur --%>
 
		</div>
		<%-- FIN menu --%>
	</div>
	<%-- FIN detail --%>
 
	<%--  Div contenant la visionneuse pdf  --%>
	<div id="document">
		<object class="pdf" data="./pdf/travail.pdf" type="application/pdf">
 			 alt : <a href="./pdf/travail.pdf">test.pdf</a>
		</object>
 
	</div>
	<%-- FIN document--%>
 
</body>
</html>

La div A est la div detail
La div B la div detailDocument
et enfin la div C la div menu

Voilà le code css pour les differentes divs de ma page

Code:

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
50
51
52
53
54
55
56
@CHARSET "ISO-8859-1";
/*---------------------------------------------------------*/
/* Script css pour la maquette JSP */
/*---------------------------------------------------------*/
 
 
 
/*---------------------------------------------------------*/
/*************** CSS BLOC COMPOSITES ***********************/
/*---------------------------------------------------------*/
body {
	/*align: center;*/
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	font-family: tahoma;
	/*overflow-y: visible;*/
	color: #000000;
	width: 100%;
	height: 100%;
}
 
 
 
div#bandeau {
	width: 1255px;
}
 
div#detail {
 
	height: 800px;
	width: 38%;
	float:left;
	margin-left:3px;
}
 
div#menu {
 
   display:block;
   witdh:100%;
   /*width: inherit;
   position:fixed;
   bottom:0;
   Pb de compatibilité avec IE*/
}
 
 
div#detailDocument {
   width: 100%;
   display:block;
}
 
div#document {
	height: 800px;
	width: 61%;
}

Voilà le code actuel

Bonsoir

Si j'ai bien compris ceci devrait faire ce que tu demande :

Code:

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
<!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">
div { border: 1px solid black;margin:4px; }
.a { width:500px;height:200px;position:relative; }
.b { max-height:165px;overflow:auto; }
.c { position:absolute;bottom:0;width:490px; }
</style>
</head>
 
<body>
 
<div class="a">
  <div class="b">
b
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <div class="c">
c
  </div>
</div>
 
</body>
 
</html>

Il faut plutôt utiliser la position absolute...

28/05/2009, 13h43
lifty

En appliquant ton code la div C prend une largeur fixe ce que je ne veut pas elle doit s'adapter a la largeur de la div A.
Si jamais je lui passe un width:100% elle sort de la div A et prend toute la largeur de ta page. (et passe derrière la div document).

Pour la div B tu as mis un overflow:auto , or je ne veut que un scroll en hauteur et pas en largeur (qui comme C doit s'adapter a la largeur de A).
28/05/2009, 18h21
12monkeys

Citation:

Envoyé par lifty

En appliquant ton code la div C prend une largeur fixe ce que je ne veut pas elle doit s'adapter a la largeur de la div A.
Si jamais je lui passe un width:100% elle sort de la div A et prend toute la largeur de ta page. (et passe derrière la div document).

En mettant un width:100% ça ne dépasse que de 10 pixels = 8 pour les marges et 2 pour le border...

Citation:

Envoyé par lifty

Pour la div B tu as mis un overflow:auto , or je ne veut que un scroll en hauteur et pas en largeur (qui comme C doit s'adapter a la largeur de A).

Pour ma part je n'ai qu'une barre verticale pour scroller en hauteur, je n'ai pas de scroll horizontal.

Mes tests ont été faits sur IE7 et Firefox 3. Tu teste sur quel navigateur ?
29/05/2009, 00h55
Macmillenium

Citation:

Envoyé par lifty

Si jamais je lui passe un width:100% elle sort de la div A et prend toute la largeur de ta page. (et passe derrière la div document).

La div A n'est donc pas en position:relative comme l'indique clairement 12monkeys dans son code ...
29/05/2009, 09h44
lifty

Citation:

Envoyé par Macmillenium

La div A n'est pas donc pas en position:relative comme l'indique clairement 12monkeys dans son code ...

Autant pour moi cela marche pour la fixation, par contre pour le overflow j'ai toujours un problème, j'ai un scroll horizontal.
(je suis sous IE7 je l'ai dit lors de la présentation de mon problème :mouarf:).

Ce scroll viens du fait que le scroll vertical apparait décalant ainsi les divs vers la gauche. Donc pour afficher tout le contenu il permet de scoller horizontalement :aie:
29/05/2009, 11h19
Macmillenium

Citation:

Envoyé par lifty

Autant pour moi cela marche pour la fixation, par contre pour le overflow j'ai toujours un problème, j'ai un scroll horizontal.
(je suis sous IE7 je l'ai dit lors de la présentation de mon pb :mouarf:).

Montre ton code stp.
29/05/2009, 17h27
12monkeys

Citation:

Envoyé par Macmillenium

Montre ton code stp.

+ 1

Parce que mon test avec IE 7 ne pose pas ce problème, a moins qu'on ne se comprenne pas...