Auto-ajustement d'une div qui vient se coller à la div au pied de page

**miya** · 13/11/2008, 14h10

Bonjour

Besoin d'aide des experts!

Ma div en dessous de mon menu, je souhaiterai qu'elle se colle automatiquement a ma div collé au bas de ma page.

En image cela donne :

http://img186.imageshack.us/my.php?image=imggl9.jpg

Au niveau du code, j'ai essayé ca :

html:

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
 
<div id="global">
 
			<div id="header" >
 
			</div>
 
			<div id="menu"></div>
 
 
			<div id="center">
				<div id="content"></div>
				<div id="sidebar"></div>
 
			</div>
 
 
			<div id="footer"></div>
 
		</div>

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
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
63
64
65
66
67
68
69
70
71
72
73
 
 
html, body {
	height: 99%;
	/*margin: 0;*/
	font-style:verdana,arial;
	font-size:98%;
	color:#999999;
	background:url("../image/fond.png") repeat-x #7f7f7f;	
	}
 
#header{
 
	height:173px;
	width: 860px;
	position:relative;
	}
 
#menu{
	background:green;
	height:41px;
	width: 860px;	
	background:url("../image/menu2.png") no-repeat;
}
 
 
 
#center {
	/* eviter la superposition 
	du pied de page et du contenu background-color:#577BAF; 
 
	 padding-bottom: 60px; */
	overflow: auto;
	background:#fff;
	/*padding-bottom: 60px;	*/
	margin-right:20px;
	width:100%;
	position:relative;
 
 
	}
 
#content {
	/* On laisse de la place  a  droite 
	pour l'autre colonne border:1px solid #fff;*/
	float: left;
	width: 65%; 
	background:red;
	}
 
#footer {
	background:url("../image/footer.png") no-repeat;
	position: absolute;
	width: 100%;
	bottom: 0;
	height:36px;
	}
 
#global {
	min-height: 100%;
	width: 860px;
	margin: 0 auto;		
	position: relative;
	font-size:94%;
 
	}
 
 
 
#sidebar {
	float: right;
	width: 30%;
	}

J'ai ajouté une div wrap englobant le center, et je l'ai mis en position absolute. Donc elle s'aligne au coin gauche en dessous de mon menu, mais maintenant je n'arrive pas a lui donner une taille automatique pour qu'elle vienne se coller à la div footer en dessous.

En espérant avoir été clair, je me tiens à votre disposition pour tout complément d'information.

Par avance merci.

**miya** · 14/11/2008, 11h11

si c faisable

**GihefBey** · 14/11/2008, 15h07

Bonjour,

Un menu ?
Quel menu ?
Il n'y a pas de menu là-dedans.

Donne le code complet.
De la page HTML et de la feuille de styles CSS.
Et indique clairement, par leur id, de quels blocs il s'agit.

++
c'est

La <div id="wrap"> est inutile.

-

**miya** · 14/11/2008, 15h26

Je pensais que c'était obsolete. J'ai édité et inséré l'ensemble du code.

Pour le wrap, c'était un test, pour voir si ca changeait qqchose.

Merci de ton aide

**GihefBey** · 14/11/2008, 15h59

Il me semble que je viens de comprendre un peu mieux.

Regarde dans ce post.
Nous sommes en train d'essayer de répondre à une question identique.

-

**miya** · 14/11/2008, 17h47

De mon côté, mon pied de page est collé en bas. Je cherche a avoir un div center qui reste coller au pied de page meme s'il n'existe pas de contenu.

**GihefBey** · 14/11/2008, 20h00

Reprenons un exemple de Stuart Nicholls.
Vidons son contenu.
Observons.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
 
<!-- Put IE into quirks mode -->
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout </title>
 
<!--
Source : http://www.cssplay.co.uk/layouts/bodyfix.html
-->
 
<style type="text/css">
html, #foot span {
        height:100%; 
        max-height:100%; 
        padding:0; 
        margin:0; 
        border:0; 
        background:rgb(209,205,193);
        font-size:76%; 
        font-family:georgia, palatino linotype, times new roman, serif;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        overflow: hidden; 
        /* */ 
        }
body {
        height:100%; 
        max-height:100%; 
        overflow:hidden; 
        padding:0; 
        margin:0; 
        border:0;
        background:rgb(209,205,193);
        }
 
#content {
        display:block; 
        overflow:auto; 
        position:absolute; 
        z-index:3; 
        top:150px; 
        bottom:52px; 
        width:640px; 
        margin-left:-321px; 
        left:50%; 
        border-left:1px solid #000;
        border-right:1px solid #000;
        background:#fff;
        }
 
* html #content {
        top:0; 
        bottom:0; 
        height:100%;
        width:642px;
        border-top:154px solid #fff; 
        border-bottom:50px solid #fff;
        }
 
#head {
        position:absolute; 
        margin-left:-321px; 
        left:50%; 
        top:0; 
        width:640px; 
        min-width:640px; 
        height:150px; 
        background:#fff; 
        font-size:1em; 
        z-index:5; 
        border:1px solid #000;
        }
 
* html #head {
        top:2px; width:642px; height:148px;
        }
 
#foot {
        text-align:center;
        position:absolute; 
        margin-left:-321px; 
        left:50%; 
        bottom:0; 
        width:640px; 
        min-width:640px; 
        height:50px; 
        background: #faa url(heading.jpg);
        background-position:0 100px;
        font-size:1em; 
        z-index:5; 
        border:1px solid #000;
        font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
        font-weight:bold;
        color:#000;
        }
 
* html #foot {
        bottom:2px; width:642px; height:48px;
        }
 
 
.bold {font-weight:bold;}
</style>
</head>
 
<body>
<div id="head">head</div>
<div id="foot"><span>foot</span>
<a href="http://www.cssplay.co.uk/layouts/">
&copy; 2004/5/6 Stuart A Nicholls ~ All rights reserved.
</a>
</div>
 
<div id="content">content</div>
</body>
</html>

-

**miya** · 23/11/2008, 12h32

Merciii

Auto-ajustement d'une div qui vient se coller à la div au pied de page

CSS

Discussions similaires

Partager

Partager