Discussion :

[HiRoN]

Bonjour,

Un ptit problème de CSS que je n'arrive pas à résoudre.
Site en ASP.net :
- Page en hauteur 100% si contenu < taille page avec footer en pied de page (pas de problème).
- Si contenu > taille page alors le contenu s'aggrandit en hauteur mais le footer reste en pied de page (donc descend pour toujours se placer en dessous du contenu)

Problème : Si contenu trop grand le footer ne descend pas (cf screenshot)

Code simplifié (pas de page en ligne) :

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
 
<!-- Container -->
<div id="container">
 
	<!-- Header -->
	<div id="header">...</div>
 
		<!-- Centre -->
		<div id="centre">
 
			<!-- Contenu -->
			<div id="contenu">
 
			<!-- Fin Contenu -->	
			</div>
 
		<!-- Fin Centre -->	
		</div>
 
<!-- Footer -->
<div id="footer">...</div>

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
 
/* Container */
#container {
position:relative;
margin:auto;
width:100%;
text-align:left;
min-height:100%;
background-color:#ADC387;
}
/* Header */
#header { height:234px; width:100%; z-index:0; margin:0; }
/* Centre */
#centre { min-height:100%; overflow:auto; padding-bottom:76px; }
/* Contenu */
#contenu { width:100%; }
 
/* Footer */
#footer {
position: absolute;		
bottom: 0; left: 0;
clear : both;
width : 100%;
height : 76px;
background-color : #CCC;
}

Merci pour vos réponses

EDIT : La page Aspx contient un UserControl chargé via Ajax. Je me demande si le problème ne viendrait pas de là. Car sur d'autres pages, aucun soucis.