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.

[c_s_s]

Bonjour,

A quoi sert le float:left; sur #contenu ?

Sinon, tu as le problème sur plusieurs navigateurs (FF, IE, Opera) ou seulement sur un seul ?

[HiRoN]

A quoi sert le float:left; sur #contenu ?

A rien, autant pour moi, j'ai oublié de l'enlever après plusieurs tests.

Sinon, tu as le problème sur plusieurs navigateurs (FF, IE, Opera) ou seulement sur un seul ?

Tous navigateurs.

En fait, le problème se pose seulement quand dans ma page aspx contient un Grid qui lui-même génère un UserControl en Ajax.
La page n'ayant pas de rafrachissement, "la structure" du site ne capte pas que la taille du grid a changé (si tu m'as compris) quand l'userControl est ouvert.

Je pensais sinon, prévoir l'espace au niveau du Grid en laissant la place pour la taille de l'userControl pour que si l'UserControl est ouvert alors j'ai la place prévu pour l'accepter (idem si tu m'as compris )

[c_s_s]

quand dans ma page aspx contient un Grid qui lui-même génère un UserControl en Ajax... (si tu m'as compris)

C'est du chinois pour moi...

[HiRoN]

C'est du chinois pour moi...

Je m'explique... (enfin je vais essayer)

Principe :

MasterPage : Contient le Css de la structure du site.
Page.aspx : Page du site qui reprend automatiquement la MasterPage et qui affiche son contenu (appelé tel un include si on peut dire au sein de la masterPage).
DataGrid (pour simplifier) : Tableau ('fin... ) contenant des infos qui en fonction des actions faites par l'utilisateur ouvre un UserControl.
UserControl : "Mini module" (pour simplifier) qui s'affiche au sein du DataGrid.

Image 1 : Grid Seul / Image 2 : Grid avec userControl (lorsque l'utilisateur clique sur l'icône "stylo")

Voila pour les définitions ('fin si on peut dire... )

Donc en gros, quand l'utilisateur clique sur l'icône "stylo", l'ouverture de l'UserControl se faisant en Ajax (composant télérik), il n'y a pas de rafraichissement de page, du coup, ça donne le problème de base, le footer ne descend pas, car le CSS (si on peut dire ça), ne voit pas que le contenu s'est agrandit.

Si tu m'as compris... (bis) Difficile à expliquer...

Pour résumé, comment faire pour que le contenu s'agrandisse en fonction du DataGrid avec userControl ouvert ou non ?

Dois-je, vu que ça à l'air un peu tendu là, prévoir la place en dessous du Grid pour faire en sorte qu'il y est toujours la place pour l'UserControl (mais donc au load de la page, cela fera un bel espace vide en dessous du grid (quand UserControl fermé) ?

[HiRoN]

N'ayant pas de solution et peu de temps, j'ai finalement remis un footer qui s'ajuste simplement en fonction de la taille du contenu, sans chercher à l'avoir en pied de page si contenu < height 100%...

Cas de figure un peu particulier... Vive les composants Télérik en ASP.net...

[Erwan31]

Salut Hiron,
si tu souhaites avoir ton footer toujours en bas du veiwport (zone d'affichage),
tu dois utiliser le positionnement fixe qui au lieu de se baser sur son premier parent positionné, se base sur la zone d'affichage.

Donc remplace position:absolute par position:fixed sachant que le contenu qui dépasse la hauteur du viewport passera sous le footer.
Ne pas oublier de trouver une autre solution pour IE6 qui n'implémente pas la valeur fixed.

Pour mieux apprendre CSS regarde ces tutoriels et cours de formation CSS : http://css.developpez.com/cours/

[HiRoN]

Donc remplace position:absolute par position:fixed sachant que le contenu qui dépasse la hauteur du viewport passera sous le footer.
Ne pas oublier de trouver une autre solution pour IE6 qui n'implémente pas la valeur fixed.

Ok Erwan, merci pour la réponse. Je tenterai cela sous peu