Fixer une div en bas d'une div

**lifty** · 27/05/2009, 12h05

Re-Bonjour,

Mon problème est le suivant, je suis sous IE7(ce n'est pas ça mon problème

), 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 css :

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

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 css :

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

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.

**thomas9501** · 27/05/2009, 12h51

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; ) ...

**lifty** · 27/05/2009, 13h13

Merci de ta réponse

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="A" class="A">
     <!-- Debut div B -->
     <div id="B" class="B">
         <!--Contient un menu à hauteur variable -->
     </div>
     <!-- fin div B -->
     <!-- Debut div C -->
     <div id="C" class="C">
         <!--Contient un menu à hauteur variable mais doit être fixé en bas -->
     </div>
     <!-- fin div C -->
 </div>
 <!-- fin div A -->

Voici un exemple :

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)

**Macmillenium** · 27/05/2009, 13h49

Bonjour,

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 ?

Envoyé par lifty

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="A" class="A">
     <!-- Debut div B -->
     <div id="B" class="B">
         <!--Contient un menu à hauteur variable -->
     <div>
     <!-- fin div B -->
     <!-- Debut div C -->
     <div id="C" class="C">
         <!--Contient un menu à hauteur variable mais doit être fixé en bas -->
     <div>
     <!-- fin div C -->
 <div>
 <!-- fin div A -->

Tu ne fermes pas les Divs, c'est normal ?

**lifty** · 27/05/2009, 14h22

non c'est pas normal

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 html :

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
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 css :

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

**12monkeys** · 27/05/2009, 20h56

Bonsoir

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

Code html :

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
<!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...

**lifty** · 28/05/2009, 13h43

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).

**12monkeys** · 28/05/2009, 18h21

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

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 ?